问题描述
参考了老师的写的优雅使用iconfont
vue引入iconfont的优雅实践
确实很优雅，感谢老师，但是我脑残把use里的xlink:href写成xlink-href，导致我一直拿不到icon TT
经常因为这点小错误就浪费一下午，痛定思痛
记一下我的代码
代码
vue.config.js
...
chainWebpack(config) {
config.module.rule("svg").exclude.add(resolve('./packages/fonts/svg'));
config.module.rule("icon").test(/\.svg$/)
.include.add(resolve('./packages/fonts/svg')).end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: 'mio-icon-[name]'
});
}
结构
svg下的index
const requireAll = requireContext => requireContext.keys().map(requireContext)
// 第一个参数代表目标文件目录
// 第二个参数是否应用于子文件夹
// 第三个参数匹配文件格式.
const req = require.context('./svg', false, /\.svg$/)
const result = requireAll(req)
requireAll(req)
icon.vue
...
<div>
<svg class="mio-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</div>
...
<script>
export default {
name: 'mio-icon',
props: {
//父传来的svg名
iconClass: {
type: String,
require: true
},
},
computed: {
iconName() {
return `#mio-icon-${this.iconClass}`
},
},
}
</script>
main.js
//引入fonts的index
import '../packages/fonts/index';
//引入icon组件
import Icon from '../packages/components/icon/index'
Vue.use(Icon)
App.vue
...
<mio-icon iconClass="aixin"></mio-icon>