目标：在做菜单权限的时候需要选择图标，如果既想要用elementUI自带的图标，还想要自定义的图标，这时就需要二者结合一下

如果用的是vue-admin-template，那svg组件和引入elementUI是不需要操作的，直接使用即可。步骤直接跳到最后就行

一、封装组件svg

src/components/Svgicon/index.vue

// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usageimport { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal() {return isExternal(this.iconClass)},iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}}.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;}

src/components/Svgicon/requireIcon.js

const req = require.context("../../icons/svg", false, /\.svg$/);const requireAll = (requireContext) => requireContext.keys();const re = /\.\/(.*)\.svg/;const icons = requireAll(req).map((i) => {return i.match(re)[1];});export default icons;

二、创建icons

src/icons/svg

这个是放svg图片的地方

src/icons/index.js

import Vue from "vue";import SvgIcon from "@/components/SvgIcon"; // svg component// register globallyVue.component("svg-icon", SvgIcon);const req = require.context("./svg", false, /\.svg$/);const requireAll = (requireContext) =>requireContext.keys().map(requireContext);requireAll(req);

src/icons/svgo.yml

# replace default config# multipass: true# full: trueplugins:# - name## or:# - name: false# - name: true## or:# - name:# param1: 1# param2: 2- removeAttrs:attrs:- 'fill'- 'fill-rule'

三、封装elementUI的图标

1、引入elementUI的css

src/main.js

import "element-ui/lib/theme-chalk/index.css";

2、封装组件

src/components/iconChoose/index.vue

export default {}

3、把所需要的elementUI的图标放入js文件中

src/components/iconChoose/icon.js

export const menuicon = ["el-icon-s-tools","el-icon-more","el-icon-s-grid","el-icon-s-data","el-icon-present","el-icon-set-up","el-icon-location-outline","el-icon-goods","el-icon-video-camera","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion","el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-menu","el-icon-s-check","el-icon-s-custom","el-icon-s-opportunity","el-icon-date","el-icon-printer","el-icon-mobile","el-icon-film","el-icon-collection","el-icon-files","el-icon-notebook-1","el-icon-notebook-2","el-icon-shopping-cart-full","el-icon-coin","el-icon-chat-dot-round","el-icon-bangzhu","el-icon-odometer","el-icon-crop","el-icon-delete-location","el-icon-medal","el-icon-message","el-icon-discount","el-icon-office-building","el-icon-receiving",];

四、页面使用

import { menuicon } from "@/src/components/iconChoose/icon.js";import icons from "@/components/SvgIcon/requirelcons";import SvgIcon from "@/components/SvgIcon/index.vue";export default {name: "Menu",components: { SvgIcon },data() {return {incondata: "", // 图标选择};},created() {this.getMenuList();this.GetAllMenuList();},methods: {// 选择图标,输入框聚焦时触发iconChoose() {// 自定义的svg和elementUI提供的结合一起使用this.incondata = [...icons, ...menuicon];},// 获取图标的值geticon(icon, index) {this.menusForm.ico = icon;},},};li {list-style: none;}.choose-icon {text-align: center;font-size: 16px;line-height: 16px;color: #17163c;margin-top: 5px;margin-bottom: 5px;}.ul-icon {display: flex;flex-wrap: wrap;padding: 5px 0;margin: 0;justify-content: center;}.ul-icon {.li-icon {width: 44px;height: 44px;text-align: center;line-height: 44px;i {font-size: 18px;}}.li-icon:hover {background-color: #f1f3f4;}}

这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下呗