vue-svgicon基本使用
在项目开发中,经常会用到svg图标,之前用的都是vue-svg-icon,最近在npm中搜索svg图标解析插件,发现vue-svgicon用的相对较多,对比以下,vue-svgicon用法较为灵活,方便,基本使用方法如下:
1、安装项目依赖
npm install vue-svgicon -D
2、在项目目录中引入svg图片(任意目录)
3、配置svg图标解析和输出路径
因为vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置:

4、在main.js中引入svgIcon组件,并且全局注册下
import SvgIcon from 'vue-svgicon'
Vue.use(SvgIcon, {
tagName: 'svg-icon'
});
5、执行下npm run svg命令

可以看到项目中icons下面多了很多js文件
6、项目中具体使用如下:
<svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon> import '@/icons/logo'
vue-svgicon基本使用的更多相关文章
- 【转载】Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...
- Vue项目中的文件/文件夹命名规范
Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- svg在vue-cli3中的配置
svg矢量图有时候在项目中用起来当然要比图片用起来好.之前没有用过svg,这次花了一点时间在项目中支持了svg的使用,个人感觉用起来还是没有直接用font class的爽,然后又改成font clas ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- vue 添加旋转图片 修改css transform 值
//点击放大图片并旋转图片 conponents组建 <template> <!-- 过渡动画 --> <transition name="fade ...
- vue+vuex+axios实现登录、注册页权限拦截
1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 1 BASE_API: '"http://192.168.xx.xx"', 2 ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
随机推荐
- 一个小工具帮你搞定实时监控Nginx服务器
Linux运维工程师的首要职责就是保证业务7 x 24小时稳定的运行,监控Web服务器对于查看网站上发生的情况至关重要.关注最多的便是日志变动,查看实时日志文件变动大家第一反应应该是'tail -f ...
- 【CV现状-3.1】图像分割
#磨染的初心--计算机视觉的现状 [这一系列文章是关于计算机视觉的反思,希望能引起一些人的共鸣.可以随意传播,随意喷.所涉及的内容过多,将按如下内容划分章节.已经完成的会逐渐加上链接.] 缘起 三维感 ...
- Crow’s Foot Notation
http://www2.cs.uregina.ca/~bernatja/crowsfoot.html Crow’s Foot Notation A number of data modeling te ...
- centos和rhel中软件包管理常用命令
软件包管理的常用命令 rpm软件包的管理 查询类: rpm -q 软件包的查询: rpm -q 软件包的名字 //你的记住软件包完整名字 模糊查询:rpm -qa | grep ...
- JavaScript图形实例:合成花卉图
我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...
- java多层嵌套集合的json,如何获取多层集合中所需要的value
就很简单的一个问题折磨了整整一天,好在压抑的心情终于释放了,终于闲下来觉得是不是应该记录一下. 首先这个json串是从外网接口返回的数据,想要了解的朋友们可以复制到json解析器中看一下格式:http ...
- mysql中skip-grant-tables无效
今天我登录MySQL时,MySQL竟然报出这样的错误:ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using pass ...
- postgreSQL安装教程 Windows
Windows 上安装 PostgreSQL 这里使用 EnterpriseDB 来下载安装,EnterpriseDB 是全球唯一一家提供基于 PostgreSQL 企业级产品与服务的厂商. 下载地址 ...
- 好的js书写习惯
1:单一判断 bad if (result) { console.log("秋叶"); } if (!result) { console.log("秋叶"); ...
- 三、VUE项目BaseCms系列文章:axios 的封装
项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便.在 vue 开发中我们用的比较多的就是 axios.下面代码是项目中用到的 axios 的封装. http.j ...