File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -26,6 +26,8 @@ regular | filled
2626
2727## Implementation
2828
29+ ### Webpack
30+
2931A 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
7072var 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.
You can’t perform that action at this time.
0 commit comments