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

本文基于vue-cli 与基于webpack的项目配置相似 使用svg-sprite-loader把svg文件封装 通过<use xlink:href="#xx"/>使用svg图标 使用svgtofont把svg文件转为eot ttf woff woff2 通过class使用font

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

svg图标支持彩色 但不支持css直接修改颜色 css亲和性低 可通过滤镜和偏移修改颜色 filter: drop-shadow(80px 0 white); transform: translateX(-80px); css字体不支持彩色 支持css直接修改颜色 css亲和性高 浏览器兼容性好

---

安装 yarn add svg-sprite-loader svgtofont -D配置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') // 定义规则 <svg class="icon"><use xlink:href="#icon-svg文件名"></use></svg> .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' 配置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"> <!-- eye为svg文件名称 --> <use xlink:href="#icon-eye"/> </svg>

font

<!-- eye为svg文件名称 --> <i class="font-eye"/>