@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

online

github

Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 https://www.iconfont.cn 的图标库为你所用,加快开发速度.

Vue 脚手架升级 3.0,项目也随之升级。

运行

  1. 装包 yarn or npm i
  2. 运行 npm run serve

使用

使用 svg-symbol 引入图标

svg 文件会导入到 HTML 文件中,无需使用两张 png 切换

./src/main.js 引入 import "./icons";

./src/icons/svg 文件夹下的 svg 文件会自动导入项目

  1. https://www.iconfont.cn 下载图标
  2. 下载的 svg 图标放在 ./src/icons/svg 文件夹下
  3. 为了使用当前环境下的颜色,去掉 svg 的 fill 属性
  4. 调用 <svg-icon icon-name="home" class-name="test"></svg-icon>

配置 svg-sprite-loader

// ./vue.config.js
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]",
include: ["./src/icons"]
});
}
};

调用当前环境下的颜色

当前环境的颜色改变,图标颜色也会跟着改变

<!--SvgIcon-->
<style>
.svg-icon {
width: 1em;
height: 1em;
fill: currentColor; /*关键*/
overflow: hidden;
}
</style>

props

props 说明 type
iconName svg 文件名,不要加上后缀 string
className 图标样式类 string

@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件的更多相关文章

  1. vue加载本地json文件

    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...

  2. vue 模拟后台数据(加载本地json文件)调试

    首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...

  3. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  4. vue.js 如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  5. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  8. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  9. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

随机推荐

  1. centos7系统日志时间与系统时间相差8小时

    场景:当我们修改完系统时间的时区后,我们去查看我们的系统日志的时间发现时区还是在之前的系统时间时区. [root@vp-n ~]# ls -l /etc/localtime lrwxrwxrwx 1 ...

  2. JSP设置文件编码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. dirlock.go

    // +build !windows package dirlock import (     "fmt"     "os"     "syscall ...

  4. 1.2 lambda 表达式的语法

    1.2 lambda 表达式的语法 还以上一节中的排序为例.我们传递代码来检查某个字符串的长度是否小于另一个字符串的长度,如下所示: Integer.compare(first.length(), s ...

  5. Hadoop配置第2节-JDK的安装

    Hadoop配置-JDK的安装 总体目标:完成zookeeper+Hadoop+Hbase 整合平台搭建   进度:1:集群网络属性配置2:集群免密码登陆配置3:JDK的安装4:Zookeeper的安 ...

  6. python 模块之lxml 防xss攻击

    Use lxml.html.clean! It's VERY easy! from lxml.html.clean import clean_html print clean_html(html) S ...

  7. OsharpNS轻量级.net core快速开发框架简明入门教程-代码生成器的使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  8. 自学Python,新手上路,好资源免费分享

    Python 可以用来做什么? 在我看来,基本上可以不负责任地认为,Python 可以做任何事情.无论是从入门级选手到专业级选手都在做的爬虫,还是Web 程序开发.桌面程序开发还是科学计算.图像处理, ...

  9. Python之父重回决策层

    在Guido van Rossum(吉多·范罗苏姆)卸任BDFL(“终身仁慈独裁者”)一职半年多之后,Python社区迎来了新的治理新方案:指导委员会模式,而经过投票Guido van Rossum也 ...

  10. 带你学习AOP框架之Aspect.Core[1]

    在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...