vite-plugin-svg-icons快速入门指南

项目基础介绍

vite-plugin-svg-icons 是一个专为 Vite 打造的高效SVG精灵图生成插件，旨在简化前端项目中SVG图标管理与使用。此项目主要用 TypeScript 编写，兼容Vue等前端框架，支持预加载所有图标，并在项目运行时仅需一次DOM操作，极大提升性能。

关键技术和框架

• Vite: 高效的前端构建工具，由Vue.js作者尤雨溪开发。
• TypeScript: 提供类型系统的JavaScript超集，提高代码质量和可维护性。
• SVG Sprites: 技术用于合并多个SVG图标到单个图像文件中，减少HTTP请求，提升页面加载速度。

准备工作和详细安装步骤

步骤一：环境准备

确保你的开发环境中已经安装了Node.js（版本 >=12.0.0）和Vite（版本 >=2.0.0）。你可以通过运行以下命令来检查Node.js的版本：

node -v

如果未安装Node.js或版本过低，请访问Node.js官网进行下载并安装。

步骤二：安装vite-plugin-svg-icons

在你的Vite项目根目录下打开终端，执行以下命令安装vite-plugin-svg-icons：

# 使用yarn
yarn add vite-plugin-svg-icons -D

# 或者使用npm
npm install vite-plugin-svg-icons -D

# 或者如果你使用pnpm
pnpm install vite-plugin-svg-icons -D

步骤三：配置Vite

接着，在项目的vite.config.ts文件中引入并配置该插件。如果你尚未创建这个文件，你需要手动创建它。

1. 引入createSvgIconsPlugin函数和path模块：

   import { defineConfig } from 'vite';
   import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
   import path from 'path';
   

2. 在plugins数组中添加配置：

   export default defineConfig({
     plugins: [
       createSvgIconsPlugin({
         // 设置图标所在文件夹路径
         iconDirs: [path.resolve(process.cwd(), 'src/icons')],
         // 设置symbolId的格式
         symbolId: 'icon-[dir]-[name]',
         // （可选）自定义插入位置，默认为body末尾
         // inject: 'body-first',
         // （可选）自定义DOM节点ID，默认为__svg__icons__dom__
         // customDomId: '__my-custom-id__',
       }),
     ],
   });
   

步骤四：图标目录结构

确保你的图标按照以下结构放置：

src/
  └── icons/
      ├── icon1.svg
      ├── icon2.svg
      └── dir/
          └── icon3.svg

步骤五：在组件中使用SVG图标

对于Vue 3项目，创建一个SvgIcon组件来使用图标：

1. 创建src/components/SvgIcon.vue:

   <template>
     <svg aria-hidden="true">
       <use :xlink:href="symbolId" />
     </svg>
   </template>
   
   <script>
   export default {
     props: {
       name: {
         type: String,
         required: true,
       },
       prefix: {
         type: String,
         default: 'icon',
       },
     },
     computed: {
       symbolId() {
         return `#${this.prefix}-${this.name}`;
       },
     },
   };
   </script>
   

2. 在其他组件或应用主入口引入并使用：

   <!-- src/App.vue -->
   <template>
     <div>
       <SvgIcon name="icon1" />
       <SvgIcon name="dir-icon3" />
     </div>
   </template>
   
   <script>
   import SvgIcon from './components/SvgIcon.vue';
   
   export default {
     components: {
       SvgIcon,
     },
   };
   </script>
   

至此，您已完成vite-plugin-svg-icons的安装和配置，可以在Vue 3项目中愉快地使用SVG图标了。记得调整图标目录和组件的使用方式以匹配您的实际项目结构。