vuecli3的svgicon_vue-cli3使用svg问题的简单解决办法_weixin_39845306的博客-程序员宅基地

技术标签： vuecli3的svgicon

效果以下：git

那个朋友圈图标就是我从网上找的svg图片github

使用方式以下：vue-cli

vue add svg-sprite

vue.config.js添加配置，在文件内最下方找到pluginOptionsnpm

module.exports = {

pluginOptions: {

svgSprite: {

* The directory containing your SVG files.

dir: 'src/assets/icons',

* The reqex that will be used for the Webpack rule.

test: /\.(svg)(\?.*)?$/,

* @see https://github.com/kisenka/svg-sprite-loader#configuration

loaderOptions: {

extract: true,

spriteFilename: 'img/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false

* @see https://github.com/kisenka/svg-sprite-loader#configuration

pluginOptions: {

plainSprite: true

}

};

再执行：svg

npm install svgo svgo-loader --save-dev

而后再在 your vue.config.js file:spa

module.exports = {

chainWebpack: config => {

config.module

.rule('svg-sprite')

.use('svgo-loader')

.loader('svgo-loader');

}

};

而后再assets下建立icons文件夹，将你的svg图标放入，name就是svg的名字，以下方式使用：插件

这个组件是插件帮你生成的code

就会看到你的svg图标出来了blog

本文链接：https://blog.csdn.net/weixin_39845306/article/details/111785795

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

JavaWeb学习笔记（一）---Web相关知识和HTTP协议_Yolanda_NuoNuo的博客-程序员宅基地

一、Web相关知识 1.Web资源 Internet上供外界访问的web资源分为：（1）静态web资源（如html页面）：web页面中供人们浏览的数据始终不变。（2）动态web：web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容会有所不同。静态web资源开发技术：html 常用动态web资源开发技术:JSP/Servlet、ASP、ASP.NET、PHP、C

android冷暖色调节_android 色温代码控制_Yogurt丶的博客-程序员宅基地

上篇文章介绍了hsv颜色转RGB，调节亮度，饱和度和色调，点我；但是没有调节灯光冷暖色的api，只能继续上网找，只是没有找到很好用的，不过在查看多篇文章后发现其实冷暖色其实就是色温，一般买的灯泡说明书都有说明色温多少多少k，色温介绍，既然知道冷暖其实就是色温之后就要知道每个色温阶段对应的rgb值，不知道的可以点下面连接色温对照表下面就开始做调节灯光的色温了首先定义一个数组把你需要的...

Markdown排版微信公众号文章_连载公众号文章读取到md笔记_Tools搜罗（gzh）的博客-程序员宅基地

前言更多精彩微信关注：随心下（Suixinxia007）大家知道，程序员宅基地可以采用Markdown来写一篇文章，易于上手而且排版效果很赞，而发布微信公众号文章却不支持Markdown文件，一般一篇文章排版时间比码字花的时间还多。常用排版工具常用的微信文章发布插件有【新媒体管家】、【135编辑器】、【365编辑器】其中新媒体管家作为浏览器插件，支持doc、docx文档直接上传，缺点是...

一种基于Android智能手机的远程视频监控的设计_yuanyuan_186的博客-程序员宅基地

android手机h.264嵌入式操作系统网络多线程一种基于Android智能手机的远程视频监控的设计[图]摘要：为了实现移动视频监控，提出了一种基于智能手机的远程视频监控系统。介绍了监控系统的体系结构和硬件平台，阐述了嵌入式操作系统Android 应用程序的开发方法，并结合实际的应用系统，重点论述了Android 平台上视频监控客户

Java基础--Java常用关键字_WY0NG的博客-程序员宅基地

什么是Java关键字Java关键字是电脑语言里事先定义的，有特别意义的标识符，有时又叫保留字，还有特别意义的变量。Java的关键字对Java的编译器有特殊的意义，他们用来表示一种数据类型，或者表示程序的结构等，关键字不能用作变量名、方法名、类名、包名和参数。（摘自百度百科）Java的保留关键字const：常量，常数。用于修改字段或局部变量的声明。 goto：跳转。指定跳转到标签，找到...

Python 编码问题——UnicodeDecodeError（二）_return codecs.utf_8_decode(input, errors, true) un_starxhong的博客-程序员宅基地

我的上一篇博客 Python 编码问题——UnicodeDecodeError（一）基本上足够应对常见Python Unicode编码错误问题，主要解释了问题产生的原因——隐式编码解码机制、避免问题的原则——Unicode“空气锁”原则。本篇主要作为一个补充，便于更好地理解第一篇文章。一，编码概述关于Python编码，你最需要了解ASCII，Unicode，UTF-8。ASCII——1...