关于前端:vue中使用svg

转载地址：#
支流图标应用办法
雪碧图 backgrount 定位
img
iconfont
symbol
svg-sprite 工作原理
利用 svg 的 symbol 元素，将每个 icon 包含在 symbol 中，通过 use 元素应用该 symbol。点击查看具体原理

svg-sprite 优缺点
长处：

批改 ID 就能够扭转图标，使用方便。
页面代码量小，保护成本低。
图标可扭转色彩大小，缩小反复图片的加载
缩小图片申请量。
毛病：

多色、渐变色等无奈通过色值扭转图标色彩，须要设计师从新设计图标。
浏览器渲染性能个别。
浏览器兼容性不佳，反对 ie9+，古代浏览器。
工具
1、懒人神器 svg-sprite-loader
解决的痛点
依据导入的 svg 文件主动生成 symbol 标签（svg 雪碧图）并插入 html。

装置

npm install svg-sprite-loader –save-dev
vue-cli2.0 webpack 配置
须要做背景的 svg 图片解决办法：
将解决 svg 的 loader 增加 exclude, 示意不须要应用改 loader 解决 icon。

// build/webpack.base.conf.js

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
exclude: [resolve('src/assets/icons/svg')],
loader: 'url-loader',
options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

}
须要做 icon 的图片解决办法：
对 include 中的 svg 文件进行雪碧图解决。option 能够设置 symbolID, 若不设置则默认 id 为 svg 文件名。

// build/webpack.base.conf.js

{

test: /\.svg$/,
include: [resolve('src/assets/icons/svg')],
loader: 'svg-sprite-loader',
options: {symbolId: 'icon-[name]' // 指定 symbolId 不指定则默认为 svg 文件名
}

}
vue-cli3.0 webpack 配置
webapck 配置自定义，可参考官网 demo

// vue.config.js

const path = require(‘path’)

function resolve(dir) {
return path.join(__dirname, ‘./’, dir)
}

module.exports = {
chainWebpack: config => {

config.module
  .rule('svg')
  .exclude.add(resolve('src/assets/icons'))
  .end()

config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/assets/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({symbolId: '[name]'
  })

}
}
页面中的应用办法
webpack 配置完后能够在页面中间接应用。import 引入须要应用的 icon 图标

import ‘./assets/icons/svg/za-icon-supplier.svg’
引入后查看页面是否曾经载入 symbol 标签内容（即 svg 雪碧图），成果如下：

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 18" id="icon 名">{{省略的 icon path}}</symbol>

</svg>
symbol 载入胜利后，在 template 中应用 svg 标签。xlink 的 href 替换为 svg 图标的 id 或者在 webpack 中自定义的 id。

.za-svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

</style>
到此为止曾经能够失常引入应用图标了。

组件化
目前应用图标须要 import 引入图标，svg 画图，再写公共款式。能够再简化一点，将这些内容放到公共组件内。组件内容如下：

// src/components/SvgIcon.vue

<!– 公共 svgicon 组件 –>
<template>
<svg :class=”svgClass” aria-hidden=”true”>

<use :xlink:href="iconName"/>

</svg>
</template>

iconClass: {
  type: String,
  required: true
},
className: {
  type: String,
  default: ''
}

},
computed: {

iconName () {return `#za-icon-${this.iconClass}`
},
svgClass () {if (this.className) {return `za-svg-icon za-icon-${this.iconClass} ` + this.className
  } else {return `za-svg-icon za-icon-${this.iconClass}`
  }
}

}
}
</script>

import ‘./assets/icons/svg/za-icon-supplier.svg’
<svg-icon icon-class=”supplier”></svg-icon>
主动导入
最初一个问题就是，每次应用图标都须要 import。能够应用 webpack 的 ==require.context== 办法，动静引入 icon 图标。
具体文档戳这里。

import Vue from ‘vue’
import SvgIcon from ‘@/components/SvgIcon.vue’

// 对立注册 svg-icon 组件
Vue.component(‘svg-icon’, SvgIcon)

// 遍历 require.context 的返回模块，并导入
const requireAll = requireContext => requireContext.keys().map(requireContext)

// import 所有符合条件的 svg 三个参数：文件夹、是否应用子文件夹、正则
const req = require.context(‘@/assets/icons/svg’, true, /.svg$/)
requireAll(req)
当初只须要在页面间接应用 svg-icon 组件，批改 icon-class 就能够展现 icon 了。

2、iconfont 的 symbol 应用形式
第一步：拷贝我的项目上面生成的 symbol 代码：

// at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：退出通用 css 代码（引入一次就行）：

.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

</style>
第三步：筛选相应图标并获取类名，利用于页面：

<use xlink:href="#icon-xxx"></use>

</svg>
转载文章：https://segmentfault.com/a/11…