安装vite-plugin-svg-icons

安装vite-plugin-svg-icons的步骤如下：

1. 确保你的节点版本大于等于12.0.0。2. 在你的项目中使用纱线或npm安装vite-plugin-svg-icons，命令如下：

   yarn add vite-plugin-svg-icons -D

或者

   npm i vite-plugin-svg-icons -D

3. 在vite.config.ts中配置插件，代码如下：

   import viteSvgIcons from 'vite-plugin-svg-icons';
   import path from 'path';

   export default {
     plugins: [
       viteSvgIcons({
         // 指定需要缓存的图标文件夹路径，可以是绝对路径或相对路径
         iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
         // 指定symbolId格式
         symbolId: 'icon-[dir]-[name]',
       }),
     ],
   };

这样就可以使用vite-plugin-svg-icons来使用iconfont等svg图标库了。

相关问题

vite-plugin-svg-icons部分引用

vite-plugin-svg-icons是一个Vite插件，用于在Vue项目中方便地引入和使用SVG图标。它可以将SVG图标文件自动转换为Vue组件，并提供了一些方便的功能来管理和使用这些图标。

使用vite-plugin-svg-icons，你可以通过以下步骤来引入SVG图标：

1. 首先，在你的Vue项目中安装vite-plugin-svg-icons插件。可以使用npm或yarn命令进行安装：

   npm install vite-plugin-svg-icons --save-dev

2. 在Vite的配置文件（vite.config.js）中，添加对vite-plugin-svg-icons的配置：

   import { defineConfig } from 'vite'
   import svgIcons from 'vite-plugin-svg-icons'

   export default defineConfig({
     plugins: [
       svgIcons()
     ]
   })

3. 在你的Vue组件中，使用`<svg-icon>`标签来引入SVG图标。你可以通过指定`name`属性来指定要使用的图标名称，例如：

   <template>
     <div>
       <svg-icon name="icon-name" />
     </div>
   </template>

   <script>
   import { defineComponent } from 'vue'

   export default defineComponent({
     // ...
   })
   </script>

这样，vite-plugin-svg-icons会自动将名为`icon-name.svg`的SVG图标文件转换为Vue组件，并在编译时进行引入和使用。

以上就是使用vite-plugin-svg-icons插件部分引用SVG图标的简要介绍。

vite-plugin-svg-icons 引入

vite-plugin-svg-icons是一个Vite插件，用于在Vue3 + Vite项目中使用SVG图标。要引入vite-plugin-svg-icons，你需要按照以下步骤进行操作：

1. 首先，在你的项目中安装vite-plugin-svg-icons插件。你可以使用yarn或npm进行安装，命令如下：

   yarn add vite-plugin-svg-icons -D

或

   npm i vite-plugin-svg-icons -D

2. 安装完成后，在你的项目中使用该插件。你需要在主入口文件（通常是main.ts）中引入插件，代码如下：

   import 'virtual:svg-icons-register'

3. 现在你可以在你的Vue组件中使用SVG图标了。你可以通过以下代码来使用SVG图标：

   <svg aria-hidden="true">
     <!-- #icon-文件夹名称-图片名称 -->
     <use href="#icon-login-eye-off" />
   </svg>

这样，你就成功引入了vite-plugin-svg-icons插件，并可以在Vue3 + Vite项目中使用SVG图标了。
#### 引用[.reference_title]
- *1* *3* [vite vue引入svg图标及封装 (轻松上手)](https://blog.csdn.net/m0_46846526/article/details/127765708)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3中 如何在vite中使用svg图标详解](https://blog.csdn.net/weixin_40816738/article/details/128279513)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]