VUE-cli3使用 svg-sprite-loader
VUE-cli3使用 svg-sprite-loader
svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html,接下来就可以在模版中方便地使用 svg-sprite 技术了。
使用 svg-sprite 的好处
- 页面代码清爽
- 可使用 ID 随处重复调用
- 每个 SVG 图标都可以更改大小颜色
安装插件
npm install svg-sprite-loader --save-dev
webpack 配置,在Vue.config.js加入处理 svg 的 loader:
const path = require('path') function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = { chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg, //const svgRule = config.module.rule('svg') //svgRule.uses.clear() config.module .rule('svg-sprite-loader') .test(/.svg$/) .include .add(resolve('src/icons')) //处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }, configureWebpack: () => ({ // resolve: { // alias: require('./alias.config').webpack // } // module: { // rules: [{ // test: /.svg$/, // use: [{ // loader: "svg-sprite-loader", // options: { // symbolId: 'icon-[name]' // } // }] // }] // } }) }
这时候发现还是不行啊, body 中并没有看到 symbol 标签。
就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader,那么就将这些 svg 统一放到一个目录下,我这里放到了 src/icons
然后要在用到的地方引入需要的svg
import './src/icon/target.svg';
重新启动项目,终于在 html 中看到了 symbol 标签!
配置好了,就可以用了。使用方法很简单,相较于原来插入 svg 图标的方法(img src 或将 svg 整个写入 html),用 svg-sprite 更加简单且清爽:
<svg><use xlink:href="#target" /></svg>
嗯,就这样短短一行。 xlink:href 中传入 svg ID 就好了,由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID,所以这里传入的 ID 即为你想显示的图标的 svg 文件名,记得加上 # 。
自动导入
你会发现,这里要想插入某个图标,都得 import ,每用一个都要重复一遍这个流程,太麻烦,那么我们就让 src/icons/svg/下的 svg 文件都自动导入吧。
webpack 可以帮我们做到:
// requires and returns all modules that match const requireAll = requireContext => requireContext.keys().map(requireContext); // import all svg const req = require.context('./assets/svg', true, /.svg$/); requireAll(req);
代码实例:
首先在main.ts中引入import './icons/index',
icons/index.js,将icons/svg中的所有svg导入并注册全局组件SvgIcon
//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 `#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>
接下来就可以使用组建了
关于 require.context 的详细用法,可以参考 webpack 文档:dynamic requires
这样一来,每当我们修改或增加新的 svg,只要将文件往这个目录下一扔,插件就会自动帮我们生成相应的 symbol 标签啦,接下来就只管用吧
- java.io.StreamCorruptedException: invalid type code: AC错误的解决方法
- 不可不知的一点Python陷阱
- 10个应该早点知道的Python技巧
- 一文读懂如何用 Python 实现6种排序算法
- 5 个很好的 Python 面试题
- Python部署手记:django, gunicorn, virtualenv, circus, nginx
- Python图像处理库:Pillow 初级教程
- 陷阱!python参数默认值
- 怎么样才算是精通 Python?
- 教你一招 | Python实现无向图最短路径
- 教你一招 | Python装饰器的另类用法
- 如何拿到半数面试公司Offer——我的Python求职之路
- Python编程语言发展简史
- 学完Python基础知识后,你真的会python吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SQL 中 EXISTS 用法详解
- Blazor带我重玩前端(六)
- PB 级大规模 Elasticsearch 集群运维与调优实践
- MySQL实时在线备份恢复方案
- Android通过原生请求直接获取网页内容
- matplotlib | Python强大的作图工具,让你从此驾驭图表(二)
- 设计模式 | Catalog设计模式,抵御业务方需求变动
- 【Flutter 专题】99 初识 EventBus
- LeetCode 102 | 将二叉树中同层的元素归并在一起
- Git | Git入门,成为项目管理大师(二)
- 学习|Unity3D使用协程实现减速停车效果
- R语言实现文献的批处理
- django-haystack ImportError: cannot import name 'six' from 'django.utils' in django 3.x
- Thanos 与 VictoriaMetrics,谁才是打造大型 Prometheus 监控系统的王者?
- 阅读大型开源软件的四个技巧