在项目开发中,经常会用到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. 一种分片更新ubi卷的方式(基于ubiupdatevol,拓展fifo支持)

    ubi卷的更新方式 对于ubi卷,不能像普通块设备一样进行随机读写.每次更新需要从头写入. 具体的,需要在打开对应的设备之后,先执行一个ioctl UBI_IOCVOLUP,同时传入要更新的数据大小. ...

  2. Visual Studio中相对路径中的宏定义

    $(RemoteMachine) 设置为“调试”属性页上“远程计算机”属性的值.有关更多信息,请参见更改用于 C/C++ 调试配置的项目设置. $(References) 以分号分隔的引用列表被添加到 ...

  3. webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

    ProvidePlugin:自动加载模块,而不必到处 import 或 require .(点击查看官方文档) 使用方法: 配置 webpack.config.js文件里 plugins 属性 new ...

  4. 2.Redux学习2----redux-thunk

    UI组件:只展示UI,不处理业务逻辑,又称傻瓜组件,因为只需要展示UI,没有状态,我们通常用函数组件(无状态组件)作为UI组件 容器父组件:只处理业务逻辑,不展示UI,又称聪明组件 redux-thu ...

  5. 如何使用TG Pro for Mac的自定义控制功能完全覆盖系统

    在某些情况下,可能需要完全覆盖系统风扇控制并使用自定义算法.通过将Auto Boost规则的强大功能与覆盖系统功能相结合,可以使用TG Pro.请记住,当风扇模式设置为Auto Boost时,这将完全 ...

  6. Angular 彻底解决 Dropdown 在 Safari 上无法自动关闭的问题

    之前在 Safari 上用 focus 事件来实现 Dropdown 下拉菜单,结果在 iOS 上不兼容. 尝试了 MDN 和 stack over flow 上各种奇技淫巧,然而在 iOS 上全都败 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 3D变换3

    5  3D旋转 在三维变形中,我们可以让元素在任何轴旋转.为此,CSS3新增了三个旋转函数:rotateX().rotateY()和rotateZ().使用rotateX()函数允许一个元素围绕X轴旋 ...

  8. eclipse中js中文乱码问题的解决办法

    在Eclipse中编辑JS文件简直是一种折磨,但是却总是很无奈得要去适应. 这里说一下Eclipse中,编辑JS文件时候,出现中文乱码问题的解决办法. 这个问题很容易想到是文件编码的问题,因此通常是修 ...

  9. 从properties中读取配置创建对象

    主要做两个事,从properties配置文件中读取信息,通过反射创建对象 思路主要有两种,遍历得到的属性集合,然后设置类的属性 遍历类的属性集合,从配置文件中读取(不推荐,因为类的属性有多样化,会报错 ...

  10. Redis缓存NoSQL

    下面是一些关于Redis比较好的文章,因为篇幅较大,我就将其折叠起来了.不太喜欢分不同的笔记去记载,除非真的很多很多.所以本文不仅要对Redis做简单的介绍,还要分别介绍Redis中的五种结构,并会贴 ...