记录插件vite-plugin-svg-icons的安装与使用

要安装和使用vite-plugin-svg-icons插件，您需要按照以下步骤操作：

1. 打开终端，并确保您的项目已经初始化，并且已经安装了Node.js（版本大于等于12.0.0）和包管理工具（如Yarn或NPM）。

2. 在终端中运行以下命令来安装vite-plugin-svg-icons插件和fast-glob依赖：

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

或者使用Yarn：

   yarn add vite-plugin-svg-icons fast-glob -D

3. 在您的vite.config.ts（或vite.config.js）文件中，导入vite-plugin-svg-icons插件：

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

4. 在plugins配置项中添加viteSvgIcons插件：

   export default {
     // ...其他配置项
     plugins: [
       viteSvgIcons()
     ]
   }

5. 现在，您可以在需要使用svg图标的组件中使用它们了。例如，在您的页面模板中：

   <template>
     <svg-icon
       :name="nameVal"
       color="blue"
       class-name="menu-svg-icon"
       :icon-title="iconTitle"
     ></svg-icon>
   </template>

6. 您还可以在脚本中设置和使用其他变量，例如：

   <script setup>
     import { ref } from 'vue'
     let iconTitle = ref('svg图片')
     let nameVal = ref('layer')
   </script>

7. 最后，您可以根据需要在样式表中自定义图标的样式：

   <style scoped>
     .menu-svg-icon {
       width: 180px;
       height: 180px;
       color: red !important;
     }
   </style>

请注意，这只是vite-plugin-svg-icons插件的基本安装和使用方式。您还可以根据具体需求进行更多的配置和定制。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>