vue中使用svg矢量图

svg的好处

矢量性（无论图片放多大，都不会出现锯齿状模糊）

利于seo

vue2中使用svg

1.安装依赖

npm install svg-sprite-loader -D

2.配置vue.config.js

 const resolve = dir => path.join(__dirname, dir);// 配置svgconfig.module.rule('svg').exclude.add(resolve('src/assets/sprites')).end();config.module.rule('sprites').test(/\.svg$/).include.add(resolve('src/assets/sprites')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',}).end();

3.在src/components下新建svgIcon组件

<template><svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners"><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}`;}return 'svg-icon';},},
};
</script><style scoped>.svg-icon {width: 10em;height: 10em;fill: currentColor;overflow: hidden;}
</style>

4.在src/plugins下新建 svg-icon.js文件

import Vue from 'vue';
import SvgIcon from '@/components/svgIcon.vue';// svg component// register globally
Vue.component('svg-icon', SvgIcon);const req = require.context('../assets/icons/sprites', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

5.在main.js 中引入

import './plugins/svg-icon';

6.下载svg图片将svg图片放在assets/sprites/下面

7. 在vue文件中使用svg图片(可以通过font-size,color来设置svg图标颜色和大小，设置color时需要将svg文件中的path下面的fill=“#xxx”去除即可)

<svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon>

在 vue3 + vite 中使用

1.安装依赖

yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D

2.配置插件 vite.config.js / vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons';
const { resolve } = require('path')export default defineConfig({plugins: [vue(),viteSvgIcons({// 配置路径在你的src里的svg存放文件iconDirs: [resolve(process.cwd(), 'src/assets/sprites')],symbolId: 'icon-[dir]-[name]',})]
})

3.存放svg文件路径 /src/assets/sprites

src/assets/sprites

- icon1.svg

- icon2.svg

- icon3.svg

4.SvgIcon组件实现

template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg>
</template><script lang="ts">
import {computed, defineComponent} from 'vue'
export default defineComponent({props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},color: {type: String,default: '#889aa4',},},setup(props) {return {iconName: computed(() => `#icon-${props.iconClass}`),svgClass: computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'}),}},
})
</script><style scope>
.svg-icon {width: 1em;height: 1em;fill: currentColor;vertical-align: middle;
}
</style>

4.在main.js / main.ts 加入否则报错

import 'vite-plugin-svg-icons/register';
// 需要全局引入再添加
import svgIcon from './components/SvgIcon.vue' // 全局svg图标组件
app.component('svg-icon', svgIcon)

5.在vue 文件中使用

<template><div><svg-icon icon-class="icon1" /></div>
</template><script>import { defineComponent, computed } from 'vue';import SvgIcon from './components/SvgIcon.vue';export default defineComponent({name: 'App',components: { SvgIcon },});
</script>

vue中使用svg矢量图相关推荐

Vue项目使用SVG矢量图型基础步骤
什么是svg 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 优势: SVG 可被非常多的工具读取和修改(比如记 ...
【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录一.SVG 矢量图简介二.Android 中生成 Vector 矢量图资源三.参考资料一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
SVG矢量图怎么做？
SVG 矢量图是一种可缩放的图像格式,基于 XML 的标记语言.它可以用于描述二维矢量图形,并且具有数百种功能,能够帮助你创建出色的网站.SVG矢量图怎么做?在本教程中,我们将学习如何使用SVG矢量图 ...
SVG矢量图中矢量路径的获取
矢量图中矢量路径的获取首先下载一张svg图片,例如,在阿里矢量图标库中下载用代码编辑器打开下载的图片将标签中的d属性复制出来,写成下面的格式这样就可以拿到矢量图中的路径了! SVG矢量图是无损 ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
在 vue 中使用 SVG 建立图标系统并且使用
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.html SVG 全称是可缩放矢量图 ...
%config InlineBackend.figure_format=svg#矢量图设置
在默认设置的matplotlib中图片分辨率不是很高,可以通过设置矢量图的方式来提高图片显示质量 %config InlineBackend.figure_format='svg'#矢量图设置
Android使用SVG矢量图打造酷炫动效！
一个真正酷炫的动效往往让人虎躯一震,话不多说,咱们先瞅瞅效果: 如果你想看 GAStudio Github主页,请戳这里: 如果你想看 GAStudio更多技术文章,请戳这里: QQ技术交流群:277 ...
vue使用阿里云矢量图
vue使用阿里云矢量图在vue中虽然使用了elementui中的图标,但是会发现图标数量有限,不能够适(zhuang)用(bi)系统,因此在vue中使用阿里云矢量图. 添加矢量图到"购物车 ...
Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...

vue中使用svg矢量图

vue2中使用svg

在 vue3 + vite 中使用

vue中使用svg矢量图相关推荐

最新文章

热门文章