解决关于vite-plugin-svg-icons不存在createSvgIconsPlugin

已于 2024-03-14 23:47:39 修改
阅读量1.8k 收藏 5
点赞数 9
文章标签： 前端 vue.js 前端框架 typescript webstorm npm node.js
于 2024-03-14 23:42:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHUAMING/article/details/136725039
版权
文章讲述了作者在使用Vue时遇到关于vite-plugin-svg-icons插件的错误，发现缺少createSvgIconsPlugin接口。通过安装特定版本的cnpm包解决了问题，并对阿里巴巴的技术实力表示赞赏。
摘要由CSDN通过智能技术生成

今天在学习使用vue的时候用到了svg，遇到报错

 'createSvgIconsPlugin' is declared but its value is never read.ts(6133)
'"vite-plugin-svg-icons"' has no exported member named 'createSvgIconsPlugin'. Did you mean 'ViteSvgIconsPlugin'

其中 createSvgIconsPlugin 下面划了红线

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

 在检查 node_modules\vite-plugin-svg-icons\dist\index.d.ts 之后，发现里面没有 createSvgIconsPlugin 这个接口。

在多次尝试后找到了解决问题的办法：使用cnpm

cnpm install vite-plugin-svg-icons -D

运行后有 createSvgIconsPlugin

问题解决。该说不说，阿里还是牛！

x华铭x
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
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-svgr:Vite插件将SVG转换为React组件
05-10
vite-plugin-svgr Vite插件可将SVG转换为React组件。 在引擎盖下使用 。用法// vite.config.jsimport svgr from 'vite-plugin-svgr'export default { // ... plugins : [ svgr ( ) ] ,} 然后可以将SVG文件作为React...
vite-plugin-svg-icons没有createSvgIconsPlugin成员
m0_56347140的博客
06-23 2865
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'爆红
import ‘virtual:svg-icons-register‘引用失败解决经历
最新发布
xia_runsheng的博客
06-24 811
引入_import 'virtual:svg-icons-register' 报错
vite+vue3项目中svg图标组件封装
qq_31594665的博客
03-14 734
如果svg图标设置颜色值不生效，点击 svg文件 查看源码，修改 fill 属性值为 fill=“currentColor”或者 fill=""。
Vite+Vue3项目vite-plugin-svg-icons版本问题报错
qq_27617813的博客
04-18 981
Vite+Vue3项目中使用vite-plugin-svg-icons因版本问题报错
TypeError: (0 , import_vite_plugin_svg_icons.createSvgIconsPlugin) is not a function
phenixzhong的专栏
04-02 907
cnpm install vite-plugin-svg-icons -D参考：解决关于vite-plugin-svg-icons不存在createSvgIconsPlugin_vite-plugin-svg-icons没有createsvgiconsplugin成员-CSDN博客
[vue3] 通过vite-plugin-svg-icons插件显示svg图标
weixin_49965757的博客
12-04 1223
四、创建缓存的图标文件夹（需和vite.config.js配置文件中插件地址一致）一、安装vite-plugin-svg-icons插件。五、封装SvgIcon.vue组件导入进行全局引用。二、在vite.config.js文件中配置插件。三、在main.js入口文件引入注册脚本。创建组件SvgIcon.vue。
记录vite-plugin-svg-icons执行npm引发的错误
u014773932的博客
12-01 3052
type：module
vite vue3 ts 全局封装自定义svg组件，全局引入
胡一可
10-25 844
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学习——svg使用及封装组件，color不生效问题
m0_49494051的博客
02-03 1077
👆以上少一步，错一步都不会生效。删除svg中的fill属性 <一个一个删好麻烦@_@>复制的svg图标自带fill属性，所以不生效。
vite-plugin-pwa：Vite的零配置PWA
02-05
npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-pwa' export default { plugins : [ VitePWA
vite-plugin-md：针对Vite的Markdown
02-04
vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 :information: Vite 2为0.2.x，Vite 1为0.1.x 安装 安装 npm i vite-plugin-md -D # yarn add vite-plugin-md -D 将其添加到vite.config...
如何使用vite-svg-loader
02-23
为了解决这些问题，Vite-SVG-Loader 插件就诞生了。 Vite-SVG-Loader 是一个轻量级的插件，专门用于在 Vite 项目中引入 SVG 图像。使用这个插件，可以轻松地引入 SVG 图像，并且可以像使用 Vue 组件一样来使用它们...
vue2&3自定义svg图标组件
pscool的博客
03-21 5202
可参考： 未来必热：SVG Sprites技术介绍 懒人神器：svg-sprite-loader实现自己的Icon组件 在Vue3项目中使用svg-sprite-loader
vue3.2 vite2 svgIcon组件引入
weixin_43160498的博客
04-07 3708
vue3.2 vite2 svg引入 首先先创建svgIcon组件 <template> <div v-if="external" :style="styleExternalIcon" class="svg-external-icon svg-icon" /> <svg v-else :class="svgClass" aria-hidden="true"> <use :href="iconName" /> </svg> &l.
Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件
shortlived的博客
08-08 2642
Vite2 + Vue3添加svg的使用
vue2项目升级到vue3遇到的问题汇总
qq3892997的博客
11-23 1131
vue2项目升级到vue3遇到的问题汇总
安装vite-plugin-svg-icons
12-05
安装vite-plugin-svg-icons的步骤如下： 1. 确保你的节点版本大于等于12.0.0。2. 在你的项目中使用纱线或npm安装vite-plugin-svg-icons，命令如下： ``` yarn add vite-plugin-svg-icons -D ``` 或者 ``` npm i vite-plugin-svg-icons -D ``` 3. 在vite.config.ts中配置插件，代码如下： ```typescript import viteSvgIcons from 'vite-plugin-svg-icons'; import path from 'path'; export default { plugins: [ viteSvgIcons({ // 指定需要缓存的图标文件夹路径，可以是绝对路径或相对路径 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // 指定symbolId格式 symbolId: 'icon-[dir]-[name]', }), ], }; ``` 这样就可以使用vite-plugin-svg-icons来使用iconfont等svg图标库了。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值