在项目开发中,经常会用到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基本使用的更多相关文章

  1. 【转载】Vue项目中的文件/文件夹命名规范

    文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...

  2. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  3. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(上)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...

  4. svg在vue-cli3中的配置

    svg矢量图有时候在项目中用起来当然要比图片用起来好.之前没有用过svg,这次花了一点时间在项目中支持了svg的使用,个人感觉用起来还是没有直接用font class的爽,然后又改成font clas ...

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

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  6. vue 添加旋转图片 修改css transform 值

    //点击放大图片并旋转图片 conponents组建 <template>    <!-- 过渡动画 -->    <transition name="fade ...

  7. vue+vuex+axios实现登录、注册页权限拦截

    1.修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 1 BASE_API: '"http://192.168.xx.xx"', 2 ...

  8. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  9. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  10. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

随机推荐

  1. 在命令提示符下,运行Java程序时,提示"找不到或无法加载主类"

    小白:在命令提示符下,运行Java程序时,提示"找不到或无法加载主类". 大神:运行Java程序的作用是让Java解释器装载,检验并运行字节码文件(.class).因此,在运行Ja ...

  2. 不加班的秘诀:如何通过AOE快速集成NCNN?

    作为我司头发储量前三的程序员 始终仗着头发多奋斗在加班的第一线 时时灵魂拷问自己 年轻人,你凭什么不加班? 虽然我没有女朋友但是,我有代码呀 但我不明白的是,隔壁工位那个,到岗比我迟,下班比我早,天天 ...

  3. JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度

    封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...

  4. 视频分享慕课网----Angular 打造企业级协作平台

    慕课网是一个非常不错的视频学习网站,搭建搭建企业协作平台,导师由深到浅,讲解的特别好. 本课程主要学习 Angular 进阶知识点和技巧(Material.动画.依赖注入.表单控件.RxJS,Redu ...

  5. FontLab VI for Mac 键盘快捷键

    使用FontLab VI for Mac,您可以创建,打开,修改,绘制,空间,文字,提示和导出桌面,网页,颜色和可变字体.该应用程序是一个全能的字体编辑器,但也支持与其他字体创建工具的数据交换,使其易 ...

  6. 0基础-scp命令一学就会

    scp -P 22 -r  /home/server Android@192.168.1.110:/opt    将本地/home/server的文件夹上传到远端服务器192.168.1.110的目录 ...

  7. Mysql 主从复制搭建-极简版

    前言 自己在百度.Google一番踩坑搭建成功后,记录一下,也希望后来人不再被这些坑到. 这里为了方便使用 docker,不会的同学请移步相关 Docker 教程. 正文 1. 启动 mysql #启 ...

  8. Splash 学习笔记

    一.介绍 Splash 跟之前我们介绍的 Selenium ( 参考 Selenium 与自动化测试 -- <Selenium 2 自动化测试实战>读书笔记) 很类似,都可以理解成一个浏览 ...

  9. 【转载】ssh-copy-id三步实现SSH无密码登录和ssh常用命令

      ssh-keygen  产生公钥与私钥对 ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./s ...

  10. 【Leetcode 做题学算法周刊】第五期

    首发于微信公众号<前端成长记>,写于 2019.12.06 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 10 ...