svg 可以当做 图标 导入react 里面 ,如果用img标签弄的话,无法控制 图标颜色 和字体 大小 ,但是把他当组件导入的话,就可以这么控制了,比较方便 ,并且也方便 webstorm 预览 首先 安装vite-plugin-svgr pnpm add vite-plugin-svgr -D 然后使用修改vite.config.js import{defineConfig}from'vite'importreactfrom'...
一、安装 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...
import { defineConfig } from "vite";import path from "path";import react from "@vitejs/plugin-react-swc";import checker from "vite-plugin-checker";import { compression } from "vite-plugin-compression2";import { createHtmlPlugin } from "vite-plugin-html";import svgr from "vite-plugin-svg...
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
我们可以使用以下命令来安装 vite-plugin-svg-icons 插件: npm install vite-plugin-svg-icons --save-dev 配置 在安装了 vite-plugin-svg-icons 插件后,我们可以在 vite.config.js 中进行配置。以下是一个示例配置: import{defineConfig}from'vite'importsvgIconsfrom'vite-plugin-svg-icons'exportdefaultdefineCon...
name: 'vite-plugin-modify-config', config: () => ({ alias: { react: require.resolve('react') } }) }) 1. 2. 3. 4. 5. 6. 7. 8. 官方推荐的用法是在 config 钩子中返回一个配置对象,这个配置对象会和 Vite 已有的配置进行深度的合并。不过你也可以通过钩子的入参拿到 config 对象进行自...
安装vite-plugin-svg-icons插件 yarn add vite-plugin-svg-icons-Dyarn add fast-glob-D 1. 2. 在vite.config.js文件中配置插件 把配置插件中 //plugins: [vue(), ] plugins: createVitePlugins(), 完整内容 import{defineConfig,loadEnv}from"vite";importpathfrom"path";importvuefrom '@vitejs/plugin-...
1.安装依赖:npm install vite-plugin-svg-icons -D 2.vite.config.ts 中配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'//在export default ({ command, mode }: ConfigEnv): UserConfig中的plugins数组中添加代码plugins: [ ...
const clearReturn = /(\r)|(\n)/g function findSvgFile(dir) { const svgRes = [] const dirents = readdirSync(dir, { withFileTypes: true }) for (const dirent of dirents) { if (dirent.isDirectory()) { svgRes.push(...findSvgFile(dir + dirent.name + '/')) ...
importsvgrfrom'vite-plugin-svgr'plugins:[svgr()], 4、styled-component/macro 产生的报错 很多cra项目中使用了styled-component/macro,但是他们都依赖babel-macro插件,因为 cra 自带babel-macro插件,styled-component/macro可以被正常解析,但是在vite中没有集成babel-macro这种插件,配置vite-plugin-babel-macros解决...