Vue项目中使用svg文件

使用第三方插件vue-svg-icon

npm i vue-svg-icon -D

在入口文件main.js引入

import Vue from from 'vue'
import Icon from 'vue-svg-icon/Icon.vue' //引入Vue.component('icon', Icon) //注册

将svg文件放到 src/svg 目录下（此目录暂时不能设置）

使用：

<icon name="example"></icon>

　　name属性的值为svg文件的文件名

转载于:https://www.cnblogs.com/lshilin/p/8599939.html

Vue项目中使用svg文件相关推荐

Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
html js使用svg图标,Vue项目中使用svg图标
1,安装依赖 Vue项目的运行少不了安装依赖,使用svg同样. npm install svg-sprite-loader --save-dev 2,配置项目中找到build文件夹中的webpack ...
在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
vue项目中的 env文件从何而来？什么是 process.env
start 在 vue 项目中,时常会遇到到这么一行代码 process.env 这东西是什么,怎么用? 今天一篇文章带你了解 process.env 1.使用场景先别急,先看 vue 项目中的用法 ...
如何在VUE项目中使用svg图标
一文带你搞定svg图标的使用! 文章目录前言一.SVG相较于字体图标的优点二.使用步骤 1.新建一个vue2项目 2.安装项目依赖 3 .在src目录下新建文件夹 4.创建svg-icon组件 ...
vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改
前言 svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗? 一.components下创建自定义公共s ...
vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...

Vue项目中使用svg文件

Vue项目中使用svg文件相关推荐

最新文章

热门文章