vue-cli3项目中集成svg组件

前言

vue-cli3 项目的搭建不做赘述。

很多人都在自己的项目中使用过svg，而使用的形式一般如下：

1、在 img 标签中使用

<img src='xxxx.svg'>

2、直接吧svg代码贴到html中

<svg t="1575978596647" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5318" width="200" height="200"><path d="M689.536 192c26.816 0 50.794667 16.64 60.202667 41.706667l78.08 207.978666 67.754666-39.125333 27.562667 47.786667-50.709333 29.269333a64.213333 64.213333 0 0 1 27.157333 52.522667v202.368a64.298667 64.298667 0 0 1-64.298667 64.298666h-27.648V874.666667h-55.146666v-75.861334H255.957333V874.666667H200.853333v-75.861334H173.184a64.298667 64.298667 0 0 1-64.32-64.298666v-202.368a64.213333 64.213333 0 0 1 27.2-52.522667L85.333333 450.346667l27.584-47.786667 67.733334 39.104 78.08-207.957333A64.298667 64.298667 0 0 1 318.933333 192h370.602667z m145.728 342.954667H173.184v199.552h662.101333v-199.552z m-556.288 50.090666a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m455.125333 0a41.386667 41.386667 0 1 1 0 82.752 41.386667 41.386667 0 0 1 0-82.752z m-44.565333-328.746666H318.933333l-79.402666 211.52h529.386666l-79.36-211.52z m-79.573333 46.037333v62.058667h-206.869334v-62.08h206.869334z" p-id="5319"></path></svg>

对于方法一，需要下载文件，引用时候需要写上长长的引用地址。

对于方法二，到时可以直接把svg复制过来就是用，但是这长长的代码，看着就让人揪心。

解决方案

1、首先，我们需要的svg资源来源，这里推荐 阿里巴巴矢量图标库。我们可以很方便的下载，或者复制svg

 

 

2 、在项目中封装svg调用组件

　　(1) 安装  svg-sprite-loader

npm install svg-sprite-loader --save

　　（2）在components公共组件文件夹下创建SvgIcon，并在SvgIcon目录下创建 index.vue

index.vue

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href='iconName' />>
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props: {
        iconClass: {
            type: String,
            require: 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) 在src目录下创建 icons 目录， 在 icons 目录下创建 index.js 文件和 svg 文件夹(用于放svg文件)

　　index.js

import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon';

// 注册全局组件
Vue.component('svg-icon', SvgIcon);

const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

　　（4）在main.js 引入 icons/index.js

import './icons'

　　(5) 在vue.config.js 中加入 svg-sprite-loader 配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }

}

使用

svg文件可以在上边说的 阿里巴巴矢量图标库 

1、下载svg文件

2、复制svg 然后在icons/svg 目录下创建svg文件，然后把复制的svg粘贴进去（推荐）

 

 

 <svg-icon iconClass='smile' />

 

文章参考 vue-element-admin 项目