Skip to content

Commit d8f71ef

Browse files
committed
chore: update docs
1 parent 2be73d4 commit d8f71ef

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

packages/react-icons/README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
1010
const closeIcon = <TimesIcon />;
1111
```
1212

13-
For a list of the available icons please refer to the [PatternFly react docs](https://react-staging.patternfly.org/icons)
13+
For a list of the available icons please refer to the [PatternFly react docs](https://pf-react-staging.patternfly.org/icons)
1414

1515
## Styling icons
1616

@@ -68,3 +68,30 @@ module.exports = {
6868
]
6969
}
7070
```
71+
72+
## Static SVGs
73+
74+
All icons are also available as static SVG files in `@patternfly/react-icons/dist/static`. The static SVGs include all the same attributes as the React components (viewBox, class names, etc.) and are generated using the same `createIcon` function to ensure visual consistency.
75+
76+
Static SVGs are useful when you need to:
77+
- Use icons in non-React contexts (HTML emails, static sites, etc.)
78+
- Embed icons directly in HTML without JavaScript
79+
- Reference icons via URL or file path
80+
- Use icons in build tools that process static assets
81+
82+
### Usage
83+
84+
You can import or reference static SVG files directly:
85+
86+
```jsx
87+
// In HTML
88+
<img src="@patternfly/react-icons/dist/static/times-icon.svg" alt="Close" />
89+
90+
// In CSS
91+
.close-icon {
92+
background-image: url('@patternfly/react-icons/dist/static/times-icon.svg');
93+
}
94+
95+
// Direct file path
96+
import timesIcon from '@patternfly/react-icons/dist/static/times-icon.svg';
97+
```

0 commit comments

Comments
 (0)