svg

SVGComponent

Warning: SVGComponent: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead

next.config.mjs
检查填充属性（svg，path等）并将所有值替换为 currentColor 以扩展当前文本颜色

  1. // pnpm add @svgr/webpack
  3. // next.config.mjs
  4. webpack: (config) => {
  5.     config.module.rules.push({
  6.       test: /\.svg$/i,
  7.       loader: '@svgr/webpack',
  8.       options: {
  9.         svgoConfig: {
  10.           plugins: [
  11.             {
  12.               name: 'preset-default',
  13.               params: {
  14.                 overrides: {
  15.                   removeViewBox: false, // important
  16.                 },
  17.               },
  18.             },
  19.           ],
  20.         },
  21.       },
  22.     });
  23.     return config;
  24.   },

组件中动态导入 svg 图标

/svg/facebook.svg

  1. interface IProps {
  2.   name?: 'facebook ' | 'google';
  3.   style?: React.CSSProperties;
  4.   className?: string;
  5.   width?: number;
  6.   height?: number;
  7. }
  9. export const Icon = async ({ name, ...rest }: IProps) => {
  10.   const Icon = await import(`./svg/${name}.svg`).then((icon) => icon.default);
  11.   return <Icon {...rest} />;
  12. };