Vite plugin to transform SVGs into React components. Latest version: 4.3.0, last published: 2 months ago. Start using vite-plugin-svgr in your project by running `npm i vite-plugin-svgr`. There are 324 other projects in the npm registry using vite-plugin
用于生成 svg 雪碧图. 特征 预加载在项目运行时就生成所有图标,只需操作一次 dom 高性能内置缓存,仅当文件被修改时才会重新生成 安装 node version:>=12.0.0 vite version:>=2.0.0 yarn add vite-plugin-svg-icons-ssr -D#ornpm i vite-plugin-svg-icons-ssr -D#orpnpm install vite-plugin-svg-icons-...
Vite plugin to transform SVGs into React components. Usessvgrunder the hood. Installation #npmnpm install --save-dev vite-plugin-svgr#yarnyarn add -D vite-plugin-svgr#pnpmpnpm add -D vite-plugin-svgr Usage // vite.config.jsimportsvgrfrom"vite-plugin-svgr";exportdefault{// ...plugins...
一、安装 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 {c...
$ npm i vite-plugin-svg-icons-D// 或$ yarnaddvite-plugin-svg-icons-D// 或$ pnpm i vite-plugin-svg-icons-D 由于其主要是在编译打包期生效,所以放在devDependencies中即可。 配置 安装完成后,需要在vite.config.ts中引入该插件,并配置对应svg地址: ...
本地运行并打包成功,在服务器上报错,打开package.json查看依赖的版本号: vite-plugin-svg-icons版本号被修改了,此版本过低导致报错。 原因是服务器上的npm没有装淘宝镜像。 解决: 安装淘宝npm(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org 再重新安装依赖,成功啦~...
1. 安装vite-plugin-svg-icons插件 npm i vite-plugin-svg-icons -D 2.vite.config.ts中配置 import path from "path"; import { createSvgIconsPlugin } from"vite-plugin-svg-icons"; exportdefaultdefineConfig({ plugins: [ ... createSvgIconsPlugin({ iconDirs...
npm install fs "svg-sprite-loader": "^6.0.9", 二:代码 1.创建svgBuilder.js import { readFileSync, readdirSync } from 'fs' let idPerfix = '' const svgTitle = /<svg([^>+].*?)>/ const clearHeightWidth = /(width|height)="([^>+].*?)"/g ...
"compilerOptions": { "types": ["vite-plugin-svgr/client"], 渲染组件 // 动态渲染图标 const IconRender: React.FC<{ icon: string; className?: string; }> = ({ icon, ...restIconProps }) => { if (typeof icon !== 'string') return null; // 图标名称类型必定为string const allIcon...
import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";//这里会报svgIcon.ts不在tsconfig.config.json文件列表中,在tsconfig.config.json的include里加//"./src/icons/svgIcon.ts"就行,不加对npm run dev没影响import{createSvg}from'./src/icons...