6. 运行并验证 最后,运行你的Vite项目: bash npm run dev 或者使用yarn: bash yarn dev 打开浏览器并访问http://localhost:3000(或Vite输出的其他地址),你应该能看到SVG图标正确显示在页面上。 通过以上步骤,你就成功地在Vite和React项目中创建并使用了一个SVG组件。
svg 可以当做 图标 导入react 里面 ,如果用img标签弄的话,无法控制 图标颜色 和字体 大小 ,但是把他当组件导入的话,就可以这么控制了,比较方便 ,并且也方便 webstorm 预览 首先 安装vite-plugin-svgr pnpm add vite-plugin-svgr -D 然后使用修改vite.config.js import{defineConfig}from'vite'importreactfrom'...
"react":"^18.2.0", "react-dom":"^18.2.0", "vite-plugin-svgr":"^2.4.0" }, "devDependencies": { "@types/react":"^18.0.28", "@types/react-dom":"^18.0.11", "@vitejs/plugin-react":"^3.1.0", "vite":"^4.2.0-beta.1" ...
在react + vite + ts项目中svg文件的基本使用如1所示1、直接在JSX组件中引入SVG文件,使用img标签,img标签的src代码嵌入到JSX组件中,例如:// XXcomponent.tsx
我在安装时提供的命令行选项那里,选择了 React + TypeScript。 使用下面的命令启动项目 yarn dev 此时的项目已经默认集成了 @vitejs/plugin-react 这个插件。 到这一步其实就已经基本结束了,自动集成 HMR,jsx,ts,css module,资源打包等一系列功能。
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...
import{ReactComponentasLogo}from'./logo.svg' If you are using TypeScript,vite-plugin-svgr/clientcan be added totsconfig.json: {// ..."compilerOptions": {// ..."types": ["vite-plugin-svgr/client"] } } License MIT Install npm i@litbase/vite-plugin-svgr ...
vite4+react+antd需要注意的地方,本地svg单 一、less、css、sass不生效问题。 方案1 less或者css,sass需要用到模块化的话,后缀名全部要加上《module》如*.module.less。否则不会生效 import styles from './index.module.less'; 生效。 vite.config.ts添加css和less css: { //* css模块化 modules: { /...
import{ReactComponentasLogo}from'./logo.svg' If you are using TypeScript,vite-plugin-svgr/clientcan be added totsconfig.json: {// ..."compilerOptions": {// ..."types": ["vite-plugin-svgr/client"] } } License MIT Packages
SVG 组件加载在不同的前端框架中的实现不太相同,社区中也已经了有了对应的插件支持: Vue2 项目中可以使用vite-plugin-vue2-svg插件。 Vue3 项目中可以引入vite-svg-loader。 React 项目使用vite-plugin-svgr插件。 现在让我们在 React 脚手架项目中安装对应的依赖: ...