手摸手，带你优雅的使用 icon

原文链接：手摸手，带你优雅的使用 icon
相关文章：未来必热：SVG Sprites技术介绍

总结symbol(svg元件)的实现流程：
1.使用插件svg-sprite-loader将指定目录下的svg处理成可以在js中import的svg-sprite，webpack配置如下：

rules: [
    {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [path.resolve(__dirname, '../src/assets/fonts')]
    },
]

2.避免麻烦的一个个导入svg,添加自动将所有svg导入到svg-sprite的功能。index.js如下

/*
加载所有iconfont字体
 */
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('../fonts', false, /\.svg$/);
requireAll(req);
export default req;

requireContext功能参考:require.context

3.创建一个icon.vue组件，页面使用这个组件即可

<template>
    <svg :class="$style.svgDefaultClass">
        <use :xlink:href="`#${name}`"></use>
    </svg>
</template>

<script>
export default {
    name: 'icon',
    props: {
        name: {
            type: String,
            required: true
        }
    }
}
</script>
<style lang="scss" module>
    .svg-default-class{
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        /*color: #fff;*/
    }
</style>

4.在.vue中直接使用

//index.js
// 定义为全局组件
import Icon from 'Coms/icon/icon.vue'
Vue.component('icon', Icon)

//demo.vue,其中icon-chat是fronts文件夹下其中一个svg的名称
<icon name="icon-chat"></icon>