【vue2.7.16系列】手把手教你搭建后台系统__selectIcon和svgIcon组件（12）

封装svgIcon组件

不造轮子，请看花裤衩封装的。地址：vue-element-admin项目中的SvgIcon组件

新建src/components/SvgIcon/index.vue文件，内容如下：

<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>
</template><script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { 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%`}}}
}
</script><style scoped>
.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;
}
</style>

注意引入isExternal从src/utils/validate.js文件中。内容如下：

/*** @param {string} path* @returns {Boolean}*/
export function isExternal(path) {return /^(https?:|mailto:|tel:)/.test(path)
}

新建src/icons/svg目录，用来存放svg图片，在src/icons/index.js中处理svg图片，并注册SvgIcon组件到全局

// 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);

配置svg-sprite-loader，安装npm install svg-sprite-loader --save-dev

'use strict'
const path = require('path')
const {defineConfig} = require('@vue/cli-service')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = defineConfig({transpileDependencies: true,publicPath: '/admin/',outputDir: '../../public/admin',devServer: {open: true,proxy: 'http://xkadmin.com'},configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, 'src')}}},chainWebpack: config => {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}
})

封装SelectIcon组件

新建src/components/SelectIcon/index.vue文件，内容如下：

<template><el-dialog :visible.sync="dialogVisible" width="500" title="请选择图标">只能搜索当前选中的页签：<el-input ref="search" v-model="iconVal" placeholder="输入关键词搜索,注意全是英文" clearable style="width: 300px" @input="upIcon(iconVal)" /><el-tabs v-model="activeName"><el-tab-pane label="Svg-Icons" name="first"><div class="trees-coadd"><div class="scollhide"><div class="iconlist"><ul class="list-inline"><li v-for="(item,i) in list1" :key="i" class="icons-item"><svg-icon :icon-class="item" @click="iconChange(item,'svg')" /></li></ul></div></div></div></el-tab-pane><el-tab-pane label="Element-Icons" name="second"><div class="trees-coadd"><div class="scollhide"><div class="iconlist"><ul class="list-inline"><li v-for="(item,i) in list2" :key="i" class="icons-item"><i :class="'el-icon-' + item" @click="iconChange(item,'el-icon')" /></li></ul></div></div></div></el-tab-pane></el-tabs></el-dialog>
</template>
<script>
import svgIcons from './svg-icons.js';
import elementIcons from './element-icons.js';export default {name: 'SelectIcon',data() {return {iconVal: '',activeName: 'first',dialogVisible: false,list1: [...svgIcons],list2: [...elementIcons]};},methods: {openDialog() {this.dialogVisible = true;},// 搜索upIcon(n) {const arrs = [];if (this.activeName === 'first') {for (let i = 0; i < svgIcons.length; i++) {if (svgIcons[i].indexOf(n) !== -1) {arrs.push(svgIcons[i]);}}this.list1 = arrs;}if (this.activeName === 'second') {for (let i = 0; i < elementIcons.length; i++) {if (elementIcons[i].indexOf(n) !== -1) {arrs.push(elementIcons[i]);}}this.list2 = arrs;}},iconChange(icon, type) {this.dialogVisible = false;this.$emit('iconChange', type === 'el-icon' ? 'el-icon-' + icon : icon);}}
};
</script>
<style scoped lang="scss">
.trees-coadd {width: 100%;height: 400px;border-radius: 4px;overflow: hidden;
}.scollhide {width: 100%;height: 100%;overflow: auto;margin-left: 18px;padding: 10px 0 10px 0;box-sizing: border-box;
}.content {font-size: 12px;
}.time {font-size: 12px;color: #2d8cf0;
}.icons-item {float: left;margin: 6px 6px 6px 0;width: 53px;text-align: center;list-style: none;cursor: pointer;height: 50px;color: #5c6b77;transition: all 0.2s ease;position: relative;padding-top: 10px;
}[class*='el-icon-'],
[class^='el-icon-'],
[class*='svg-icon'],
[class^='svg-icon'] {font-size: 32px !important;
}
</style>

新建src/components/SelectIcon/element-icons.js 和src/components/SelectIcon/svg-icons.js文件，内容分别如下：

// element-icons.js
const elementIcons = ['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round'];export default elementIcons;

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