unplugin-icons/vite'

unplugin-icons/vite是一个用于Vite构建工具的插件，用于处理和加载图标。它可以与unplugin-vue-components一起使用，用于加载自定义的SVG图标库。在Vite的配置文件vite.config.ts中，可以通过引入UnpluginVueComponents和Icons，以及配置IconsResolver和FileSystemIconLoader来使用unplugin-icons/vite。

使用unplugin-icons/vite时，可以按照{前缀}-{图标集名称}-{图标名称}的结构来引用图标。例如，使用@iconify-json提供的图标集时，可以使用<i-mdi-abacus />来引用图标。还可以结合element-ui的icon组件使用，例如<el-icon size="30"> <i-mdi-abacus /> </el-icon>。

如果你在src/assets/icons目录下有一个名为refresh-line.svg的图标，可以使用&lt;i-custom-refresh-line /&gt;来引用这个自定义图标。同样，你也可以结合element-ui的icon组件使用，例如&lt;el-icon size="30"&gt; &lt;i-custom-refresh-line /&gt; &lt;/el-icon&gt;。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3 + vite 项目搭建 - 配置图标库](https://blog.csdn.net/qq_40026668/article/details/121626737)[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: 100%"]
[ .reference_list ]