1 src下建文件夹
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) const res = requireAll(req) console.log('svg',res)
2 components下建文件
index.vue
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: "SvgIcon", props: { iconClass: { type: String, required: true, }, className: { type: String, default: "", }, }, computed: { iconName() { return `#icon-${this.iconClass}`; }, svgClass() { if (this.className) { return "svg-icon " + this.className; } else { return "svg-icon"; } } } }; </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
3 main.js引用
import '@/icons' // icon
4 重启项目(!!!),没重启就没给生效,很坑。
注意事项:
1步骤打印的数据 应该是对象 而不是['img/xx','img/xx']
本文来自博客园,作者:哈利波特甜,转载请注明原文链接:https://www.cnblogs.com/zmh-980509/p/16576087.html