在vue3中使用vite-svg-loader插件

暗月Moon

已于 2023-10-03 18:50:43 修改

阅读量1k

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2023-10-03 18:35:57 首次发布

本文链接：https://blog.csdn.net/Anyuegogogo/article/details/133524198

版权

vue3 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。

安装

npm install vite-svg-loader --save-dev

使用

import svgLoader from 'vite-svg-loader'
 
export default defineConfig({
  plugins: [vue(), svgLoader()]
})

组件里使用

在路径后加?component，表示像组件一样使用。

import Icon404 from '@/assets/icons/svg/404.svg?component';
<Icon404></Icon404>

在路径后加?url，可以做为图片url引入

import Icon404 from '@/assets/icons/svg/404.svg?url';
<img :src="Icon404" alt="">

参考链接：参考链接
官方文档：链接

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

暗月Moon

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在vue3中使用vite-svg-loader插件

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。
复制链接

扫一扫

专栏目录

vue3+vite使用vite-svg-loader，加载svg

jquerybootstrap的博客

03-07

1225

【代码】vue3+vite使用vite-svg-loader，加载svg。

如何使用vite-svg-loader

02-23

Vite-SVG-Loader 是一个轻量级的插件，专门用于在 Vite 项目中引入 SVG 图像。使用这个插件，可以轻松地引入 SVG 图像，并且可以像使用 Vue 组件一样来使用它们。下面是使用 Vite-SVG-Loader 的基本步骤： 1. ...

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

小白详解Vue3项目中怎么引入 SVG 图标

qq_29701691的博客

09-01

5197

既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的阿里图标库来寻找。创建好项目后，我们进入到阿里的素材库里面找一些后续需要的图标，进行解压，删除不必要的东西，只留下 iconfont.js 文件即可。那我们只能将项目里的图标，选择 Symbol 并下载至本地。这里讲解下如何将阿里图标库里面的东西，放到我们的页面上。进入页面，找到资源管理下面的我的项目，并创建项目。引入阿里的 SVG 图标到项目中。将购物车里面的图标添加到项目中。并添加到购物车中，...

vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载

05-13

Vite SVG装载机 Vite 2.x插件可将SVG文件作为Vue组件加载。 < template> < MyIcon> </ template> < script setup > import MyIcon from ' ./my-icon.svg ' </ script > 安装 npm install vite-svg-loader --save-dev 设置 vite.config.js import svgLoader from 'vite-svg-loader' export default { plugins : [ vue ( ) , svgLoader ( ) ] } 与TypeScript一起使用如果在Typescript项目中使用加载程序，则可能会收到类似Type 'string' is not assignable to type 'Compo

推荐：SVG Loaders —— 动态SVG加载图标库

最新发布

gitblog_00030的博客

05-11

368

vite-svg-loader，在项目里轻松使用svg，ts项目需特别注意！

有事儿私信。

05-19

3287

vite-svg-loader插件可以让我们像使用vue组件那样使用svg图，使用起来超级方便。

SVG 文件的引入方式之一：以 URL 的方式引入 SVG 文件，vue2、vue3+Vite vite-svg-loader

学习笔记

01-03

6929

vue2 使用 require() 引入 svg 使用vue3 + ts + vite 使用 vite-svg-loader 插件引入svg 使用并最终实现代码提示一样使用图标文件。

vite svg 插件

batman_yr的博客

11-22

764

vite2 vue3 加载svg 图片 import { readFileSync, readdirSync } from 'fs' const path = require('path') const svgTitle = /<svg([^>+].*?)>/ const clearHeightWidth = /(width|height)="([^>+].*?)"/g const hasViewBox = /(viewBox="[^>+].*?")/g const cl

VUE-cli3使用 svg-sprite-loader

10-17

svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下

vue-svg-icon-loader:将SVG文件转换为VueJS组件

05-17

您可以导入这些文件，然后直接在您的Vue应用程序中使用它们： < template> < div> < my width = ' 1.5em ' height = ' 1.5em '> </ div></ template>< script >import MyIcon from ' ./my-icon.svg 'export ...

vue-svg-inline-loader：Webpack加载器，用于用Vue项目中的SVG文件的实际内容内联替换SVG图像

02-06

vue-svg-inline-loader 加载器，用于在项目中用SVG文件的实际内容内联替换SVG图像。加载程序仅解析HTML模板格式。 Loader具有用于SVG优化的内置支持。 Sprite选项仅适用于方法。 Vue CLI 通过创建的项目不是...

vite-plugin-svgr:Vite插件将SVG转换为React组件

05-10

vite-plugin-svgr Vite插件可将SVG转换为React组件。在引擎盖下使用。用法 // vite.config.js import svgr from 'vite-plugin-svgr' export default { // ... plugins : [ svgr ( ) ] , } 然后可以将SVG文件作为React组件导入，就像一样： import { ReactComponent as Logo } from './logo.svg' ; 执照麻省理工学院

SVGLoader:SVG加载器

05-12

SVGLoader 由CodeDrops安装的Bower可安装SVGLoader。 /** * svgLoader.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014, Codrops * http://www.codrops.com */ 这不是我的项目，但将来如有需要，我可以提供支持。我目前要求通过Bower将SVGLoader包含在项目中。我无法在Github上找到仓库，因此我正在使用另一个项目中复制的源代码制作一个仓库。

vue-cli3使用vue-svg-loader加载svg

weixin_34383618的博客

06-13

1950

vue-svg-loader Documentation - FAQ webpack loader that lets you use SVG files as Vue components Microsoft Edge 报错问题在 Microsoft Edge 存在ES6spread & rest语法无法转译的问题 Error: Expected identifier, str...

vite vue3 ts 全局封装自定义svg组件，全局引入

胡一可

10-25

786

8.因为项目使用svg组件频率很高，所以将svg组件注册成全局组件，新建service/globalComponent/index.ts。6.为了更好地复用，接下来将svg封装成一个全局组件，以后使用更加方便，新建component/svgicons/index.vue。4.使用vite-plugin-svg-icons插件还需要fast-glob依赖。1.安装vite-plugin-svg-icons插件。2.配置vite.config.ts文件，配置插件。7.使用svgicon组件。

Vue3 + vite svg 组件

qq_44306441的博客

03-27

1700

Vue3 + vite 编写svg组件，本质上和vue2 + webpack 没有多大出入，唯一不同的是得编写一个vite插件 WbIcon.vue 这个文件和之前没多大改变，不一样之处是用了setup,可以按需更改，当然了不改也能食用。 <template> <svg :class="svgClass" aria-hidden="true" v-bind="$attrs"> <use :xlink:href="iconName" /> &

vite配置 vue3中怎么使用svg图标

青阳的博客

10-09

1247

vite vue3中怎么使用svg图标 svg图片在项目中使用的非常广泛，如何在vue3 + vite 中使用svg图标。 vite-plugin-svg-icons 预加载在项目运行时就生成所有图标,只需操作一次 dom 高性能内置缓存,仅当文件被修改时才会重新生成

three.js SVGLoader

X01动力装甲的专栏

12-07

1091

three.js SVGLoader // instantiate a loader var loader = new THREE.SVGLoader(); // load a SVG resource loader.load( // resource URL 'data/svgSample.svg', // called when the resource is loaded func...

vue3+vite+ts svg图片作为组件引入

qq_20663639的博客

08-29

620

vue3+vite svg图片作为组件引入

uniapp vue3项目如何使用vite-plugin-svg-icons

01-21

在uniapp vue3项目中使用vite-plugin-svg-icons插件可以按照以下步骤进行操作： 1. 首先，安装vite-plugin-svg-icons插件。可以使用以下命令进行安装： ```shell yarn add vite-plugin-svg-icons -D ``` 2. 在项目的根目录下创建一个vite.config.js文件，并在该文件中配置vite-plugin-svg-icons插件。可以按照以下示例进行配置： ```javascript import { defineConfig } from 'vite' import svgIcons from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ svgIcons({ iconDirs: [/* 指定存放svg图标的目录路径 */], symbolId: 'icon-[dir]-[name]', }) ] }) ``` 在上述示例中，需要将`iconDirs`替换为存放svg图标的目录路径。 3. 在main.ts文件中引入svg图标。可以按照以下示例进行引入： ```javascript import 'virtual:svg-icons-register' ``` 以上就是在uniapp vue3项目中使用vite-plugin-svg-icons插件的步骤。