react -- 展示Svg组件封装 -- vite-plugin-svg-icons

安装相关的Svg库

npm install vite-plugin-svg-icons --save-dev

:::info
原文地址：https://www.yuque.com/suancairiji/sqowo1/yyogpfgudgqmlgu4?singleDoc# 《react – 展示Svg组件封装》
:::

Vite.config.ts配置如下

plugins: [
    react(),
   
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
      iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
      // 指定symbolId格式（这里的配置与6.2步骤中的引入svg组件的name配置项写法有关）
      symbolId: 'icon-[dir]-[name]',
    }),
  ],

:::info
这里为了能看明白自定义路径，截图了目前项目使用的路径
:::

Main.tsx 配置引入

...
import 'virtual:svg-icons-register';

问题点记录：引入可能会导致莫名报错，重启项目可以解决

开始封装Svg组件

import { useMemo } from "react";

type SvgIconProps = {
  size?: string | number;
  color?: string;
  prefix?: string;
  name: string;
};

/**
 * @Svg组件
 * @props  color   图标颜色
 * @props  name 图标名称--文件名称
 * @props  size  图标大小
 * @props  prefix 前缀 默认icon
 */

export default function SvgIcon({
  color,
  name,
  size = 16,
  prefix = "icon",
}: SvgIconProps) {
  const symbolId = useMemo(() => `#${prefix}-${name}`, [prefix, name]);
  return (
    <svg aria-hidden="true" width={size} height={size} fill={color}>
      <use href={symbolId} fill={color} />
    </svg>
  );
}

最后使用该组件进行展示svg

:::info
这里需要注意的是name为文件名称，例如：web_logo_red.svg需要进行展示
:::

import SvgIcon from "../SvgIcon";
export default function HeadMenu() {
  return (
    // 重要的事情说两次，name为文件名称 ：web_logo_red.svg
    <SvgIcon name="web_logo_red" size={85} ></SvgIcon>
  );
}