vue3项目导入本地图标

一、下载图标库到本地

例如阿里图标库：iconfont-阿里巴巴矢量图标库

1. 选所需图标收藏入库

2.自己的图标库下载入库的图标

3.下载的压缩包解压到本地，并将解压的图标文件拖拽进新创建的svg文件夹中

二、安装插件

1.安装svg图标引用所需插件

//命令行
npm install fast-glob -D
npm install vite-plugin-svg-icons -D

main.js或者main.ts引入注册脚本

// 引入注册脚本
import 'virtual:svg-icons-register';

在vite.config.js文件中配置插件：

方式一：

***
import path from 'path';
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
const pathSrc = path.resolve(__dirname, "src");
export default defineConfig({
  plugins: [
   	***
    // SvgIcon插件配置（本地图标）
    createSvgIconsPlugin({
      // 指定图标文件夹（文件夹路径根据实际情况更改）
        iconDirs:[path.resolve(pathSrc,'assets/icons/svg'),path.resolve(pathSrc,'assets/error')],
  		resolve('src/assets/error')],
      // 指定symbolId格式
      symbolId:'icon-[dir]-[name]',
    }),
  ],
});

方式二：

***
import path from 'path';
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons';
const resolve = (dir) => path.resolve(process.cwd(), dir);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
   	***
    // svgIcon导入（本地图标）
    createSvgIconsPlugin({
      // 指定图标文件夹（文件夹路径根据实际情况更改）
      iconDirs:[resolve('src/assets/icons/svg'), resolve('src/assets/error')],
      // 指定symbolId格式
      symbolId:'icon-[dir]-[name]',
    }),
  ],
});

三、vue项目中配置图标

1.将存有图标的svg文件夹拷贝到vue项目src/assets/icons目录下

注意：icons目录需要自己创建

2.在 src /components文件夹目录下，创建一个svg组件

内容如下：

<template>
    <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
      <use :xlink:href="symbolId" :fill="color" />
    </svg>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon'
    },
    iconName: {
      type: String,
      required: false,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '1em'
    }
  })
  
  const symbolId = computed(() => `#${props.prefix}-${props.iconName}`)
  </script>
  
  <style scoped>
  .svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    outline: none;
    fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  }
  </style>

3.在main.js或者main.ts中配置全局

import { createApp } from 'vue'
import App from './App.vue'
// 本地图标
import svgIcon from '@/components/SvgIcon/index.vue';

const app = createApp(App);

***

app.component('svg-icon',svgIcon);

app.mount('#app');

四、使用

示例：

代码：

<template>
***
<div  class="iconBox" title="测量"
        @click="boxClick('measure')">
        <svg-icon iconName="celiang" class="icon"  />
</div>
***
</template>
<style lang="less" scoped>
 	.iconBox {
       width: 32px;
       height: 32px;
       line-height: 35px;
       cursor: pointer;
     }

    .iconBox .icon {
        width: 20px !important;
        height: 20px !important;
        color: #6e6e6e;
    }
</style >