在React中如何封装一个自定义svgicon图标组件

239 阅读2分钟

在Vite中配置SVG图标组件并动态导入SVG文件同样是一个常见的需求。以下是如何在Vite和TypeScript项目中实现这一目标的详细步骤。

步骤概述

  1. 创建一个Vite项目并安装必要的依赖。
  2. 配置Vite以支持导入SVG文件。
  3. 创建一个SVG图标组件。
  4. 使用SVG图标组件。

步骤详细

Step 1: 创建一个Vite项目并安装必要的依赖

首先,创建一个新的Vite项目。如果你还没有安装Vite,可以先安装它:

npm create vite@latest my-vite-app --template react-ts
cd my-vite-app
npm install

Step 2: 配置Vite以支持导入SVG文件

为了在Vite中处理SVG文件,我们可以使用vite-plugin-svgr插件。首先,安装该插件:

npm install vite-plugin-svgr

然后,在vite.config.ts中配置该插件:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

Step 3: 创建SVG图标组件

创建一个Icon组件,使用动态导入来加载SVG文件。

src/components/Icon.tsx

import React, { useEffect, useState } from 'react';

interface IconProps {
  name: string;
  size?: number;
  color?: string;
}

const Icon: React.FC<IconProps> = ({ name, size = 24, color = 'currentColor' }) => {
  const [SvgIcon, setSvgIcon] = useState<React.FC<React.SVGProps<SVGSVGElement>> | null>(null);

  useEffect(() => {
    const importSvgIcon = async () => {
      try {
        const icon = await import(`../icons/${name}.svg?react`);
        setSvgIcon(() => icon.default);
      } catch (error) {
        console.error(`Error loading SVG icon: ${name}`, error);
      }
    };

    importSvgIcon();
  }, [name]);

  if (!SvgIcon) {
    return null; // 或者返回一个默认的图标或占位符
  }

  return (
    <SvgIcon width={size} height={size} fill={color} />
  );
};

export default Icon;

Step 4: 使用SVG图标组件

现在你可以在任何组件中使用你的Icon组件。

src/App.tsx

import React from 'react';
import Icon from './components/Icon';

const App: React.FC = () => {
  return (
    <div>
      <h1>My Application</h1>
      <Icon name="home" size={48} color="blue" />
      <Icon name="settings" size={32} color="red" />
    </div>
  );
};

export default App;

项目结构

确保你的项目结构如下:

my-vite-app/
  ├── public/
  ├── src/
  │   ├── components/
  │   │   └── Icon.tsx
  │   ├── icons/
  │   │   ├── home.svg
  │   │   └── settings.svg
  │   ├── App.tsx
  │   ├── index.css
  │   ├── main.tsx
  ├── index.html
  ├── package.json
  ├── tsconfig.json
  ├── vite.config.ts

运行项目

确保项目正在运行:

npm run dev

打开浏览器访问http://localhost:3000,你应该能够看到加载的SVG图标。

通过这种方式,你可以在Vite项目中使用动态导入功能来加载SVG文件,并且可以灵活地管理和使用这些SVG图标。✔️