@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. Java学习-048-插件应用之 Find Bugs

    FindBugs 是一个静态分析工具,它可以检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题,使用 FindBugs 可以在不实际运行程序的情况对软件进行分析.使用时最好将字节 ...

  2. Entity Framework学习笔记(一)

    请注明转载地址:http://www.cnblogs.com/arhat 哈哈!老魏回来了,4月份的内容开始更新了,由于3月份时间都在做项目,没有时间写了,那么4月份老魏会尽可能的多写点东西的.那么4 ...

  3. [MEAN Stack] First API -- 7. Using Route Files to Structure Server Side API

    Currently, the server.js is going way too long. In the real world application, it is likely that we ...

  4. Myeclipse2014 SVN安装方法以及项目上传到svn服务器

    1. 打开 Myeclipse 工具栏下的Help下的Install from Site 2.打开后弹出窗口, 并点击Add标签,如下图: 3.现在是最重要的一步,填写相关信息. 在对话框Name输入 ...

  5. Servlet,过滤器,监听器,拦截器的区别

    1.过滤器 Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml ...

  6. 4-51单片机WIFI学习(开发板51单片机自动冷启动下载原理)

    上一篇链接 http://www.cnblogs.com/yangfengwu/p/8743936.html 这一篇说一下自己板子的51单片机自动冷启动下载原理,我挥舞着键盘和鼠标,发誓要把世界写个明 ...

  7. 工具类:Colletions ,Arrays(静态导入,可变参数,强循环)

    一.Collecti 专门用来操作集合的工具类,没有构造函数,全静态方法. 常用方法: static <T extends Comparable<? super T>> voi ...

  8. Python中循环引用(import)失败的解决方法

    原文链接:http://blog.ihuxu.com/the-solution-to-the-problem-of-circular-import-in-python/ 我是采用方案三 "将 ...

  9. Postman测试api@RequestBody接收参数

    api postman 结果 { , "message": "Content type 'multipart/form-data;boundary=----------- ...

  10. 【h5标签转小程序标签】小程序使用wxParse解析html教程

    一.先下载所需文件,下载地址:https://pan.baidu.com/s/1umZO9uI24zUTRd7VqaWbAg  ,下载完毕后会得到一个wxParse文件夹,后面会用到: 二.先拷贝cs ...