首页umi 4.0怎么以组件的方式使用svg

umi 4.0怎么以组件的方式使用svg

时间: 2025-02-09 13:14:51 浏览: 125

在 Umi 4.0 中，以组件化的方式使用 SVG（Scalable Vector Graphics）可以让你更好地组织和复用代码。SVG 是一种矢量图形格式，适合于在各种分辨率下保持清晰度。以下是如何在 Umi 项目中以组件形式导入并使用的步骤： 1. **创建SVG组件**：首先，在项目的 `src/components` 或其他自定义组件目录下创建一个新的文件夹，比如 `SVGIcons`。然后为每个独立的 SVG 图形创建一个 `.jsx` 或 `.tsx` 文件，例如 `Logo.svg.js`。 ```jsx // Logo.svg.js import React from 'react'; import { useIcon } from '@umijs/svg-react'; const Logo = () => { const svgContent = useIcon('path/to/your-logo.svg'); // 替换为实际的SVG路径 return <svg dangerouslySetInnerHTML={{ __html: svgContent }} />; }; export default Logo; ``` 这里使用了 `@umijs/svg-react` 插件的 `useIcon` hook 来动态加载 SVG 内容。 2. **引入和使用组件**：在需要使用 SVG 图标的组件或页面中，导入并渲染这个新的 SVG 组件。 ```jsx // 使用Logo组件 import Logo from '@/components/SVGIcons/Logo'; function App() { return ( <div> <Logo /> </div> ); } export default App; ``` 3. **CSS 样式和大小调整**：如果需要应用样式或者调整 SVG 的尺寸，可以在组件内部或外部添加 CSS 类名和样式规则。 ```jsx // Logo.svg.js (添加一个 className) const Logo = ({ className }) => { const svgContent = useIcon('path/to/your-logo.svg', { className }); return <svg className={className} dangerouslySetInnerHTML={{ __html: svgContent }} />; }; ```

阅读全文