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 >