前言

通常我们项目的 Icon 都是使用 iconfont 来下载 SVG,然后在项目中使用这些 SVG :

<img :scr=svgLogo />
...
<script>
import svgLogo from '@/assets/svg/handsome.svg'
</script>

大概就是这么个意思。代码现场手打,复制绝对报错。你想想每使用一个 SVG 就要来这么一段,一看就让人内牛满面,于是苦心翻找(炫酷google),大概知道了这么个玩意儿:svg-sprite-loader,大概的意思就是把SVG转成了HTML的symbol标签,当然98%的人不会关心你到底是symbol还是png,最主要是,引入要优雅,要流畅,要富有艺术气息。

下面是封装好的 iconSvg 组件 是不是瞬间就 优雅 流畅 富有艺术气息 了呢

<icon-svg icon-class="zanwushuju" />

注:icon-class 里是 svg 的文件名

本文尽量简洁干练,为了方便大部分着急解决问题、准备 Ctrl C V 连击直接带走的朋友,接下来我们进入真正的步骤:

第一步,Vue Create xxx

好好好 o(╥﹏╥)o

开始

第一步,安装 svg-sprite-loader

yarn add svg-sprite-loader --save-dev

第二步,安装结束后,在 vue.config.js 中加入以下代码:

chainWebpack 详解

// webpack相关配置
chainWebpack: (config) => {
    // 配置别名
    config.resolve.alias.set("@", resolve("src"));
    // set svg-sprite-loader
    config.module.rules.delete("svg");
    config.module
        .rule("svg-smart")
        .test(/\.svg$/)
        .include.add(resolve("@/icons/svg"))
        .end()
        .use("svg-sprite-loader")
        .loader("svg-sprite-loader")
        .options({
            symbolId: "[name]"
        });


    // other set ...
}

解释一下上面主要配置的意思:

干掉 module 下名字叫 svg 的默认配置项

config.module.rules.delete("svg");

正则匹配文件名规则,就是匹配 .svg 文件

.test(/\.svg$/)

处理你的 svg 目录

.include.add(resolve("@/icons/svg"))

第三步,在 src 下的 components 文件夹内新建 iconSvg.vue 文件

以下是 iconSvg.vue 文件内容

<template>
    <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
    export default {
        name: 'icon-svg',
        props: {
            iconClass: {
            type: String,
            required: true
            }
        },
        computed: {
            iconName() {
            return `#${this.iconClass}`
            }
        }
    }
</script>

<style>
    .svg-icon {
        width: 1em;
        height: 1em;
        font-size: 18px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

第四步,将所需 svg 文件放置 iconssvg 文件夹下

第五步,在 icons 文件夹下新建 index.js

index.js 文件内容

import Vue from 'vue'
import IconSvg from '@/components/iconSvg/IconSvg'
// 全局注册icon-svg
Vue.component('icon-svg', IconSvg);

// 这个我也不知道啥意思
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

第六步,在 main.js 中引入 icons文件

第七步,直接在组件中使用即可

<icon-svg icon-class="zanwushuju" />

完结撒花

如今的我,谈不上幸福,也谈不上不幸。——太宰治


既然挑无自己的违和之处,那只管好好生活便是。