通过vite-plugin-svg-icons 使用SVG图片

一、安装 vite-plugin-svg-icons

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

二、在main.js引入

import 'virtual:svg-icons-register'

三、配置SVG图片文件夹

如：

四、在vite.config.js中配置

//import path,{ resolve } from 'path'
import path from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'export default defineConfig((command) => {return {plugins: [createSvgIconsPlugin({// 指定要缓存的文件夹iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],// 指定symbolId格式symbolId: '[name]'})],
}})

五、新建svg封装组件，路径参考：src\components\svg-icon\index.vue

<template><svg :class="svgClass" aria-hidden="true"><use class="svg-use" :href="symbolId" /></svg>
</template><script>import { defineComponent, computed } from 'vue'export default defineComponent({name: 'SvgIcon',props: {prefix: {type: String,default: 'icon'},name: {type: String,required: true},className: {type: String,default: ''}},setup(props) {const symbolId = computed(() => `#${props.name}`)const svgClass = computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'})return { symbolId, svgClass }}})
</script>
<style scope>.svg-icon { vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */overflow: hidden;}
</style>

六、按需引入使用

<template><SvgIcon name="issue"></SvgIcon></template><script setup>
import SvgIcon from "@/components/SvgIcon.vue";
</script>

七、全局引入使用

在main.js中加入

import svgIcon from './components/svgIcon/index.vue'createApp(App).component('svg-icon', svgIcon)

通过vite-plugin-svg-icons 使用SVG图片相关推荐

在vue3+vite+ ts 项目中使用svg
一:components下新建svgIcon.vue文件 <template> <svg :class="svgClass" v-bind="$attr ...
拥抱SVG：苦恼于图片适配 in Android？
前言不管是开发 Android 已久的老司机,还是刚刚上车的新司机,都肯定会对一件事情深恶痛绝:图片适配(尤其是在美工不给力的条件下)!为什么 Android 手机要有这么多不同的分辨率? 为什么我 ...
java使用 Batik svg代码转换成png图片 JPEGTranscoder/PNGTranscoder 转图片 linux 中文乱码
目录缺少中文字符集缺少微软雅黑字体两种情况:缺少中文字符集,缺少对应中文字体(windows一般默认微软雅黑). 本文链接:https://blog.csdn.net/qq_31183727/a ...
android png图片动画,android图片系列 (4) - SVG动画(动态SVG 图片)
看过之前那篇介绍静态 SVG 矢量图片的童鞋,应该时有感触的,SVG 就是给我们一个空的不限制大小的canvas画板,然后我们使用 path 路径去绘制我们需要的图形,这就是静态的 SVG.动态 S ...
修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色？
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
安卓学习笔记--拥抱 SVG：苦恼于图片适配 in Android？
转载文章地址: 转自lypeer文章 http://gold.xitu.io/post/57dfe16379bc440065e85b2b 拥抱 SVG:苦恼于图片适配 in Android? 前言不 ...
svg标签和svg文件区别_什么是SVG文件？ SVG图片和标签说明
svg标签和svg文件区别 SVG (SVG) SVG or Scalable Vector Graphics is a web standard for defining vector-based ...
图像转svg,及绘制svg图像
图像转svg 1:生成svg图 sudo apt install potrace pythonimport osdef t(img_path):"""img转svg方法: ...
svg标签和svg文件区别_SVGO减少SVG文件大小的三种方法
svg标签和svg文件区别 This article is part of a series created in partnership with SiteGround. Thank you for ...
html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...

通过vite-plugin-svg-icons 使用SVG图片

通过vite-plugin-svg-icons 使用SVG图片相关推荐

最新文章

热门文章