导入 .svg 并调整 .svg 大小在 next.js 中使用样式组件

Question

我目前正在尝试将 .svg 导入 next.js 项目，但失败了。

我尝试以与 React 项目相同的方式导入 .svg，创建了typing.d.ts 并导入 svg 之类的组件。但这不起作用。

declare module '*.svg' {
  import React from 'react';

  const src: string;

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  export default src;
}

导入 svg 示例

• 我使用 next.js - 12.1 和 styled-components - 5.3.3
• example-import-svg

我需要什么？

• 导入 .svg 文件并更改其宽度和高度。

有人遇到过同样的问题吗？ 或者有人设法解决了吗？

谢谢

Answer 1

也许是一个解决方案。

• next.js 中 removeViewBox 的默认选项是 true。如果您更改 .svg height 或 width，.svg 中的视图框将恢复为默认值。
• 如果您在 next.config.js webpack 中使用并将 removeViewBox 设置为 false .svg 调整大小即可开始工作。

一个工作示例： stackblitz-resize-svg-next.js

  webpack(config) {
    config.module.rules.push({
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: { removeViewBox: false },
              },
            },
          ],
        },
        titleProp: true,
      },
      test: /\.svg$/,
    });

    return config;
  },

如果您在 .babelrc 中设置了“inline-react-svg”，则此解决方案将不起作用。

Answer 2

我使用的另一种方法是利用 svgo-loader：

  // Asset handling
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

    // SVG handler, inlines everything under 200KB
    config.module.rules.push({
      test: /\.svg$/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 200 * 1024
        }
      },
      use: 'svgo-loader'
    });
    
    return config;
  },

Answer 3

我就是这样用的。

1-我使用 SVG 代码创建了一个组件，该组件接收宽度、高度或其中任何一个作为参数

2-如果没有它们，则获取 svg 默认宽度和值，否则它将返回具有新宽度的 svg或高度值，根据给定的

3- 默认值添加到 viewBox 属性

正如您可以看到下面的代码：

type SVGDoubleArrowIconProps = {    
    newWidth?: number;
    newHeight?: number;
};

export default function SVGDoubleArrowIcon({ newWidth, newHeight }: SVGDoubleArrowIconProps) {
    const defaultDimensions = { width: 50, height: 50 };
    let finalDimensions = { width: 0, height: 0 };
    if (!newWidth && !newHeight) {
        finalDimensions.width = defaultDimensions.width;
        finalDimensions.height = defaultDimensions.height;
    } else if (newWidth) {
        finalDimensions.width = newWidth;
        const ratio = newWidth / defaultDimensions.width;
        finalDimensions.height = ratio * defaultDimensions.height;
    } else if (newHeight) {
        finalDimensions.height = newHeight;
        const ratio = newHeight / defaultDimensions.height;
        finalDimensions.width = ratio * defaultDimensions.width;
    }

    return (
        <svg
            width={finalDimensions.width}
            height={finalDimensions.height}
            viewBox={`0 0 ${defaultDimensions.width} ${defaultDimensions.height}`}
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="M56.4411 24.9827C56.4489 24.9729 56.4481 24.9588 
56.4393 24.9499L33.6545 1.93291C32.8718 1.14228 31.5944 1.14228 30.8117 
1.93291L26.3926 6.3971C25.6212 7.17637 25.621 8.43145 26.3923 
9.21088L40.6236 23.5929C41.3948 24.3723 41.3947 25.6274 40.6233 
26.4067L26.3922 40.7827C25.6209 41.5618 25.6206 42.8166 26.3915 
43.5961L30.8115 48.0654C31.5942 48.8567 32.8722 48.8569 33.6551 
48.0658L56.4404 25.042C56.4484 25.0339 56.4484 25.021 56.4404 
25.0129C56.433 25.0055 56.4324 24.9938 56.4389 24.9856L56.4411 24.9827Z"
                fill="#01FFA9"
                stroke="#0E0E0E"
                strokeWidth="2"
                strokeMiterlimit="10"
            />
            <path
                d="M32.4455 24.9817C32.4544 24.9727 32.4544 24.9582 
32.4455 24.9492L9.65446 1.93251C8.87177 1.14207 7.59451 1.14216 6.81194 
1.93271L2.39284 6.39682C1.62132 7.1762 1.62132 8.4315 2.39284 
9.21088L16.6295 23.5926C17.4012 24.3721 17.401 25.6276 16.6293 
26.4069L2.39274 40.7827C1.62122 41.5618 1.6208 42.8168 2.3918 
43.5964L6.81175 48.0656C7.59429 48.8568 8.87221 48.8571 9.65513 
48.0662L32.4462 25.043C32.4544 25.0347 32.4537 25.0211 32.4445 
25.0137C32.4354 25.0063 32.4347 24.9927 32.4429 24.9843L32.4455 24.9817Z"
                fill="#01FFA9"
                stroke="#0E0E0E"
                strokeWidth="2"
                strokeMiterlimit="10"
            />
        </svg>
    );

}

这样我就可以将其导入到任何组件或页面中并在以下位置使用它：

1- 新宽度：

import SVGDoubleArrowIcon from '../components/SVGDoubleArrowIcon'
export default function MyPage(){
    return(<div><SVGDoubleArrowIcon width={300} /></div>);
}

2- 新高度：

import SVGDoubleArrowIcon from '../components/SVGDoubleArrowIcon'
export default function MyPage(){
    return(<div><SVGDoubleArrowIcon height={300} /></div>);
}

3- 或默认宽度和高度

import SVGDoubleArrowIcon from '../components/SVGDoubleArrowIcon'
export default function MyPage(){
    return(<div><SVGDoubleArrowIcon /></div>);
}