vue3+vite项目中使用svg图标

淡淡的烟草味﹌ 2023-10-11 21:56 82阅读 0赞

#### vue3+vite项目中使用svg图标 ####

*  引言
 *  1. vite-plugin-svg-icons插件
 *   *  安装
     *  配置
 *  2. 下载svg图标
 *  3. 使用svg图标
 *   *  封装 svg-icon 组件
     *  全局注册
     *  组件中使用

## 引言 ##

项目中有很多地方需要用到svg图标，Element Plus 组件库提供了一套常用的图标，但是往往不能满足需求，而网上比较全的就是[阿里图标库][Link 1]，下面就介绍如何将阿里图标库中的svg图标引入到自己的项目中。

## 1. vite-plugin-svg-icons插件 ##

本文的项目使用vue3+vite来构建，可以使用第三方的vite-plugin-svg-icons插件，来引入svg图标。

### 安装 ###

安装vite-plugin-svg-icons插件

# npm
    npm i vite-plugin-svg-icons -D
    # yarn
    yarn add vite-plugin-svg-icons -D
    # pnpm
    pnpm install vite-plugin-svg-icons -D

### 配置 ###

vite.config.ts 中配置插件

import {
         createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    import path from 'path'
    
    export default () => {
        
      return {
        
        plugins: [
          createSvgIconsPlugin({
        
            // 图标文件夹为src/assets/icons
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',
        ],
      }
    }

在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

## 2. 下载svg图标 ##

1.在src/assets下新建icons目录，用于存放svg图标。  
2.进入[阿里图标库][Link 1]，找到想要的svg图标，下载svg。  
![在这里插入图片描述][344f60d5bca242c79fba1b7e39f2d29a.png]

![在这里插入图片描述][68a773ff38784e4bbfa2869018f52e7e.png]  
3.将下载的svg放入图标目录src/assets/icons。  
![在这里插入图片描述][ae6142702fc9427e9f6926e19afbaffc.png]

## 3. 使用svg图标 ##

### 封装 svg-icon 组件 ###

在[ iconfont 官网上][iconfont]可以看到给出了使用svg的示例代码：

如果每次都按照上面的方式使用，无疑是很麻烦的，可以将其封装成组件，在需要用到的地方直接引入即可。  
在 components 目录下新建 SvgIcon 目录，然后新建index.vue 文件。

<template>
      <svg aria-hidden="true" class="svg-icon" :width="width" :height="height">
        <use :xlink:href="symbolId" :fill="color" />
      </svg>
    </template>
    
    <script setup>
    import {
         computed } from 'vue'
    const props = defineProps({
        
      prefix: {
        
        type: String,
        default: 'icon'
      },
      name: {
        
        type: String,
        required: true
      },
      color: {
        
        type: String,
        default: '#333'
      },
      width: {
        
        type: String,
        default: '16px'
      },
      height: {
        
        type: String,
        default: '16px'
      }
    })
    
    const symbolId = computed(() => `#${
          props.prefix}-${
          props.name}`)
    </script>

### 全局注册 ###

在 main.ts 里面全局注册，不然每次引用图标的时候还得单独引入一次该组件。

import svgIcon from "@/components/SvgIcon/index.vue";
    const app = createApp(App)
    app.component('SvgIcon', SvgIcon);

### 组件中使用 ###

传入需要使用的图标名即可，同时还可以传入颜色，宽度和高度来定义样式。

*  效果

![在这里插入图片描述][73dafc44b0c24492994b1f112edd9140.png]  
参考：https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh\_CN.md

[Link 1]: https://www.iconfont.cn/
[344f60d5bca242c79fba1b7e39f2d29a.png]: https://img-blog.csdnimg.cn/344f60d5bca242c79fba1b7e39f2d29a.png
[68a773ff38784e4bbfa2869018f52e7e.png]: https://img-blog.csdnimg.cn/68a773ff38784e4bbfa2869018f52e7e.png
[ae6142702fc9427e9f6926e19afbaffc.png]: https://img-blog.csdnimg.cn/ae6142702fc9427e9f6926e19afbaffc.png
[iconfont]: https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.28&helptype=code
[73dafc44b0c24492994b1f112edd9140.png]: https://img-blog.csdnimg.cn/73dafc44b0c24492994b1f112edd9140.png