记一次愚蠢的svg使用。。。

问题描述

参考了老师的写的优雅使用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>