一、SVG-Sprite组件

svg-sprite 的好处:
页面代码清爽
可使用ID随处重复调用
每个SVG图标都可以更改大小颜色

https://npm.taobao.org/package/svg-sprite-loader

二、组件安装

npm install svg-sprite-loader --save-dev
npm install svg-sprite-loader -D

三、修改配置

修改配置webpack中webpack.base.conf.js

      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'//去掉svg这个图片加载不出来
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        //这个不处理svg图片，因为我们独立拆开让svg-sprite-loader来处理了
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

添加配置

四、创建svg组件

在components目录下：

创建svg的组件

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

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: 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>

组件是全局通用的，所以要在项目加载的第一时间把它注册到全局Vue中去，在入口文件main.js中设置。

四、创建icons文件夹存放svg的图标
在src目录下创建icons文件夹。

创建icons文件夹

图标文件

icons/index.js内容：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'  // svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

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

五、在main.js中引入

//引入整个icons,
import './icons'

六、在模板中使用

  <svg-icon icon-class="documentation" class="test"/>

显示

七、svg在vue-cli3中的配置

在vue.config.js中配置webpack：

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, ".", dir);
}
module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  outputDir: "dist",
  assetsDir: "static",
  indexPath: "index.html",
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    },
    // 设置主机地址
    host: "localhost",
    // 设置默认端口
    port: 8080,
    // 设置代理
    proxy: {
      "/api": {
        // 目标 API 地址
        target: "http://localhost:8000/", // 接口的域名
        // 如果要代理 websockets
        ws: false,
        // 将主机标头的原点更改为目标URL
        changeOrigin: true, // 跨域
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  },
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // svg是个基础loader
    // const svgRule = config.module.rule('svg')
    svgRule.uses.clear();   // 如果删除将和MarkDown冲突
    svgRule
    .test([/\.svg$/, /\.scss$/]) 
    .include.add(resolve("src/icons")) // 处理svg目录
    .end()
    .use(["svg-sprite-loader", "css-loader", "sass-loader"]) //
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]"
    });
    // 必须配置
    const fileRule = config.module.rule('file');
    fileRule.uses.clear();
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons/svg'))
      .end()
      .use('file-loader')
      .loader('file-loader');

  },
  configureWebpack: () => ({})
};

添加图标文件
在src目录下创建icons文件夹。

icons文件夹
添加组件
在src\components目录中创建文件：
SvgIcon\index.vue

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

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: 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>

图标目录icons中创建文件index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

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

main.js引入组件

// 导入图标
import '@/icons/index.js'

图标使用

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

显示结果

VUE开发--SVG-Sprite组件(三十二)