React SvgIcon组件封装vite-plugin-svg-icons

使用vite-plugin-svg-icons，封装svgIcon组件。

1. yarn add vite-plugin-svg-icons
2. 创建文件夹。src/assets/svg。svg文件放在此目录下。
3. 创建SvgIcon组件

//SvgIcon.jsx

const SvgIcon = (props) => {
  const {
    name,
    prefix = "icon",
    iconStyle = { width: "80px", height: "80px" },
  } = props;
  const symbolId = `#${prefix}-${name}`;
  return (
    <svg aria-hidden="true" style={iconStyle}>
      <use href={symbolId} />
    </svg>
  );
};

export default SvgIcon;

4.在main.js引入文件。

//'''
import "virtual:svg-icons-register";

5.配置vite.config

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";


....

 plugins: [
    react(),
    // svg 
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), "src/assets/svg")], //svg地址
      symbolId: "icon-[dir]-[name]",
    }),
  ],

5.fast-glob 报错未安装，直接安装fast-glob。

6.使用SvgIcon

import SvgIcon from "@/components/SvgIcon";

<SvgIcon name="milk" width="24" height="24" />

7.效果。