Vue项目中操作svg文件

Vue项目中使用svg
引入依赖
yarn add svg-sprite-loader -D

[可选] yarn add svgo svgo-loader -D

依赖说明：
svg-sprite-loader
sprites 会被自动渲染和注入页面，您只需通过<svg><use xlink:href="#id"></use></svg>
工作原理是: 利用svg的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol.

svgo svgo-loader用于精简 svg 代码

1.在src/icons/svg存放icon矢量图（以.svg结尾）

2.svg 目录主要用于存放 svg 文件，来看一下 index.js 的内容，功能就是把组件注册到全局，方便使用：

在src/icons/index.js中使用webpack的require.context自动引入src/icons下面所有的图标。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件// register globally
Vue.component('svg-icon', SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext);
/*** require.context(directory,useSubdirectories,regExp)* require.context():需要一次性的引入某个文件夹下的所有文件
形参：
directory：需要引入文件的目录
useSubdirectories：是否查找该目录下的子级目录
regExp：匹配引入文件的正则表达式*/const req = require.context('./svg', false, /\.svg$/);
requireAll(req)

3、在 src/components/ 下创建 SvgIcon 组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script>
export default {name: "SvgIcon",props: {iconClass: {type: String,required: true},className: {type: String,default: ""}},computed: {iconName() {return `#icon-${this.iconClass}`;},svgClass() {if (this.className) {return "svg-icon " + this.className;} else {return "svg-icon";}}}
};
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

4、在main.js中引入

import '@/icons';//引入svg模板

5、在组件中如何使用：
这里就会使用 src/icons/svg/example.svg 文件。

<svg-icon icon-class="example"></svg-icon>

6 最重要的一点!!!
因为此项目是Vue cli3 所以对 vue.config.js 进行配置

 chainWebpack: config => {config.plugin('define').tap(args => {const argv = process.argvconst icourt = argv[argv.indexOf('--icourt-mode') + 1]args[0]['process.env'].MODE = `"${icourt}"`return args})// svg rule loaderconst svgRule = config.module.rule('svg') // 找到svg-loadersvgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录svgRule // 添加svg新的loader处理.test(/\.svg$/).use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',})// 修改images loader 添加svg处理const imagesRule = config.module.rule('images')imagesRule.exclude.add(resolve('src/icons'))config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)},

Vue项目中操作svg文件相关推荐

Vue项目中使用svg文件
使用第三方插件vue-svg-icon npm i vue-svg-icon -D 在入口文件main.js引入 import Vue from from 'vue' import Icon from ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
html js使用svg图标,Vue项目中使用svg图标
1,安装依赖 Vue项目的运行少不了安装依赖,使用svg同样. npm install svg-sprite-loader --save-dev 2,配置项目中找到build文件夹中的webpack ...
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文件相关推荐

最新文章

热门文章