webpack项目svg转svg图标&字体图标

本文基于vue-cli 与基于webpack的项目配置相似
使用svg-sprite-loader把svg文件封装 通过使用svg图标
使用svgtofont把svg文件转为eot ttf woff woff2 通过class使用font

本文代码地址 https://gitee.com/tothis/vue-record/blob/master/client

• svg图标支持彩色 但不支持css直接修改颜色 css亲和性低
  可通过滤镜和偏移修改颜色

filter: drop-shadow(80px 0 white);
transform: translateX(-80px);

• css字体不支持彩色 支持css直接修改颜色 css亲和性高 浏览器兼容性好

---

1. 安装
   yarn add svg-sprite-loader svgtofont -D
2. 配置svg加载器

配置vue.config.js

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

// https://cli.vuejs.org/zh/config
module.exports = {
    // https://cli.vuejs.org/zh/guide/webpack.html
    chainWebpack: config => {
        // 让其他svg loader不对src/assets/icon进行操作
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icon'))
            .end()
        // 使用svg-sprite-loader对src/assets/icon下的svg进行操作
        config.module
            .rule('icon')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icon'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            // 定义规则 
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
}

svg文件放在src\assets\icon目录下 在改目录下创建index.js

import Vue from 'vue'

const requireAll = requireContext => requireContext.keys().map(requireContext)
// 指定svg文件
const r = require.context('./', false, /.svg$/)
requireAll(r)

// 在src/main.js中引入此文件
// import '@/assets/icon'

3. 配置font转化器

配置vue.config.js

// svg转字体
require('svgtofont')({
    src: path.resolve(process.cwd(), 'src/assets/icon'), // svg文件目录
    dist: path.resolve(process.cwd(), 'src/assets/font'), // 生成文件目录
    fontName: 'font', // 生成文件名称和字体名称
    css: true // 生成字体文件
}).then(() => {
    console.log('生成字体成功')
}).catch(() => {
    console.log('生成字体失败')
})
// 建议在.gitignore中加入 src/assets/font

// 在src/main.js中引入字体文件
// import '@/assets/font/font.css'

---

使用示例
svg

<svg class="svg-icon">
	
	<use xlink:href="#icon-eye"/>
svg>

font

<i class="font-eye"/>