svg转精灵图，vite-plugin-svg-icons的使用

LiliRush

已于 2023-08-08 12:54:21 修改

阅读量321

点赞数

文章标签：前端

于 2023-08-03 14:24:49 首次发布

本文链接：https://blog.csdn.net/LiliRush/article/details/132082209

版权

一、安装vite-plugin-svg-icons

二、建文件夹，放置svg图片

三、配置vite.config.ts文件

四、main.ts导入

五、使用时

六、创建图标组件，根据父组件传值更改图标，创建子组件在component文件夹中创建CpIcon.ts文件。

注意：注册组件之后使用。父组件使用时name传值svg图片路径的‘文件名-svg名’：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LiliRush

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue3 + Vite 中使用 vite-plugin-svg-icons 插件显示本地 SVG 图标

King Saj

08-21

738

这样配置后，你就可以在 Vue 3 项目中显示本地的 SVG 图标了。请根据具体情况将代码中的路径和图标 id 替换为实际使用的内容。

vite-plugin-svg-icons:Vite插件可快速创建SVG精灵

03-06

vite-plugin-svg-icons English | 用于生成svg精灵图。特征预加载项目运行时会生成所有图标，并且只需要操作一次dom。高性能的内置缓存，只有在修改文件后才会重新生成。安装（纱线或npm）节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_64310738的博客

02-14

375

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

vite-plugin-svg-icons 教程

gitblog_00332的博客

08-08

782

vite-plugin-svg-icons 教程 vite-plugin-svg-iconsVite Plugin for fast creating SVG sprites.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-svg-icons 1. 项目介绍 vite-plugin-svg-icons 是一个适用于 Vite 的插件，用于快速...

Vue3+ts+vite项目中使用vite-plugin-svg-icons插件处理svg，vue3项目vite中使用svg

weixin_52465240的博客

04-06

1097

在vite脚手架中配置对svg的处理

Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons

weixin_48040732的博客

02-19

4714

这里记录下自己在Vue3+vite的项目使用vite-plugin-svg-icons来全局使用svg雪碧图，不使用ts语法，方便以后直接使用。

批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用

weixin_39729729的博客

04-03

4623

在vue3项目中，需要批量导入某个文件夹内数量不确定的svg文件用来作为图标，开发完成后能够通过增减文件夹内的svg文件，从而影响图标的数量。是一个vite插件，提供轻松导入svg文件作为symbol元素并插入到document中的功能。所以最终选择使用插件在编译的时候就导入所有svg文件，解决了动态导入的问题，让业务逻辑更流畅。// 引入/src/assets/icon-svg/文件夹下的所有svg文件。svg是一种 xml语言，svg作为html标签使用的时候，除了svg标签。中引入即可，详情可参阅。

vite-plugin-svg-icons 用法

最新发布

于坤

08-30

636

提供了一种简便的方法来在 Vue 3 项目中管理和使用 SVG 图标。通过这个插件，你可以轻松地将本地的 SVG 文件转换为 Vue 组件，从而在项目中轻松使用这些图标。配置和使用非常简单，并且可以通过自定义symbolId和组件来满足不同的需求。

Vite Plugin SVG Icons 使用教程

gitblog_00075的博客

08-08

307

Vite Plugin SVG Icons 使用教程 vite-plugin-svg-iconsVite Plugin for fast creating SVG sprites.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plugin-svg-icons 1. 项目的目录结构及介绍 vite-plugin-svg-icons/ ├── README....

Vite Plugin SVG Icons 使用指南

gitblog_00880的博客

08-22

464

Vite Plugin SVG Icons 使用指南 vite-plugin-svg-icons项目地址:https://gitcode.com/gh_mirrors/vit/vite-plugin-svg-icons 1. 项目目录结构及介绍 vite-plugin-svg-icons/ ├── src/ # 核心源代码目录 │ ├── i...

利用自定义组件实现svg自由——vite-plugin-svg-icons

weixin_43714543的博客

06-20

2895

利用自定义组件实现svg自由——vite-plugin-svg-icons

vite-plugin-svg-icon:svg icon 转为组件

04-09

vite-plugin-svg-icon 将 svg icon 转化为 vue 组件安装 yarn add vite-plugin-svg-icon #or npm install vite-plugin-svg-icon 使用在 vite 配置加入插件 vite.config.ts import { defineConfig } from 'vite'; import { VueSvgIcon } from 'vite-plugin-svg-icon'; defineConfig({ plugins[VueSvgIcon()] // or plugins[VueSvgIcon({ // 生成组件的类名 className: 'my-icon-class' // default "svg-icon" /**

Vite中使用vite-plugin-svg-icons插件配置SVG图标，并自动去除fill属性

whatfuck123的博客

02-22

1338

Vite中使用Svg图标

vite-plugin-svg-icons 使用SVG图片为什么use没有显示

02-01

vite-plugin-svg-icons 是一个 Vite 插件，用于在项目中使用 SVG 图标。它可以将 SVG 图标转换为 Vue 组件，方便在项目中使用。如果在使用 vite-plugin-svg-icons 时，<use> 标签没有显示 SVG 图片，可能有以下几...

vue3中使用插件vite-plugin-svg-icons

Anyuegogogo的博客

10-03

1971

在vue3 + vite 项目中使用svg图标，vue3中使用插件vite-plugin-svg-icons

VUE3 使用 vite-plugin-svg-icons加载SVG

CMDN123456的博客

06-21

389

VUE3 使用 vite-plugin-svg-icons加载SVG

Nuxt3中怎么使用SVG

weixin_47948509的博客

05-14

995

Nuxt3项目中SVG图标的用法

[vue3] 通过vite-plugin-svg-icons插件显示svg图标

weixin_49965757的博客

12-04

1280

四、创建缓存的图标文件夹（需和vite.config.js配置文件中插件地址一致）一、安装vite-plugin-svg-icons插件。五、封装SvgIcon.vue组件导入进行全局引用。二、在vite.config.js文件中配置插件。三、在main.js入口文件引入注册脚本。创建组件SvgIcon.vue。

vite-plugin-svg-icons 使用

09-07

vite-plugin-svg-icons 是一个 Vite 插件，用于在项目中使用 SVG 图标。它可以将 SVG 图标转换为可在项目中使用的 Vue 组件或 React 组件，并提供了一些方便的功能。要使用 vite-plugin-svg-icons，首先需要安装它...