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 >