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

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

一、封装组件svg

src/components/Svgicon/index.vue

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 globally

Vue.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: true

plugins:

# - 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

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",

];

四、页面使用

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

精彩链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。