Skip to content

Commit 33e7456

Browse files
committed
docs: add Vite example to SVG icons README
Adds some simple instructions for using icons with Vite to the `svg-icons` package's README
1 parent b8be2c9 commit 33e7456

1 file changed

Lines changed: 15 additions & 0 deletions

File tree

packages/svg-icons/README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ regular | filled
2626

2727
## Implementation
2828

29+
### Webpack
30+
2931
A common use case is to use [svg-inline-loader](https://www.npmjs.com/package/svg-inline-loader) in your Webpack config.
3032

3133
```bash
@@ -69,3 +71,16 @@ Or `require`:
6971
```ts
7072
var icon = require('@fluentui/svg-icons/icons/add_20_filled.svg');
7173
```
74+
75+
### Vite
76+
77+
If your project uses [Vite](https://vite.dev/), you can use an icon either as an SVG or inlined (note the URL query params):
78+
```ts
79+
import AddIconInline from "@fluentui/svg-icons/icons/add_20_filled.svg?inline";
80+
import AddIconRaw from "@fluentui/svg-icons/icons/add_20_filled.svg?raw";
81+
82+
`<img src="${AddIconInline}">`
83+
`<div>${AddIconRaw}</div>`
84+
```
85+
86+
See <https://vite.dev/guide/assets.html> for more information on asset handling with Vite.

0 commit comments

Comments
 (0)