vite vue svg

vite是一个现代化的前端构建工具，用于快速构建Vue项目。它支持使用插件来加载和处理各种文件类型，包括SVG图标文件。

在使用vite构建Vue项目时，你可以通过安装vite-svg-loader插件，并在vite.config.js中进行相关配置来处理SVG图标文件。你需要指定需要缓存的SVG图标文件夹，并设置symbolId格式，这个格式与在引入SVG组件时的name配置项有关。

然后，你可以在项目中创建一个文件夹，并将SVG图标放入其中。接下来，在main.js文件中引入并注册SvgIcon组件。这个组件可以显示SVG图标，你可以通过传入name、prefix和color属性来自定义图标的名称、前缀和颜色。

最后，全局注册SvgIcon组件，这样你就可以在项目的任何地方使用它来显示SVG图标了。

综上所述，vite可以很方便地处理和使用SVG图标文件，并且通过SvgIcon组件可以轻松地在Vue项目中显示这些图标。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载](https://download.csdn.net/download/weixin_42176827/18659286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3+vite配置svg文件的全局使用（想怎么改颜色、宽高都可以）](https://blog.csdn.net/m0_38134431/article/details/125508459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]