转载地址：#
支流图标应用办法
雪碧图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雪碧图），成果如下：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
<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。
<svg><use xlink:href="#icon-za-icon-supplier" /></svg>
批改图标色彩，大小。
<style type="text/css">
.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>
<script>
export default {
name: 'SvgIcon',
props: {
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>
<style lang="scss">
.za-svg-icon {
width: 20px;
height: 20px;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
</style>
当初应用组件只须要两步。
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代码（引入一次就行）：
<style type="text/css">
.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>
第三步：筛选相应图标并获取类名，利用于页面：
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use></svg>
转载文章：https://segmentfault.com/a/11...