在NextJS中导入SVG

gpnt7bae 于 2023-10-18 发布在其他

关注(0)|答案(3)|浏览(284)

我试图在NextJS项目中导入svg，每次我得到这个错误

./assets/aboutimg.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="1028" viewBox="0 0 578 1028">
|   <image id="_64538565_2370063099695596_8091233071539421184_n" data-name="64538565_2370063099695596_8091233071539421184_n" width="578" height="1028" xlink:href="

我试过使用next-images和svgr。我将把我的About.js代码粘贴在下面，如果有人能让我知道我做错了什么，那就太好了。

import LayoutNoLogo from '../comps/LayoutNoLogo'
import AboutImg from '../assets/aboutimg.svg'

const About = () => {
    return (
        <LayoutNoLogo>
            <div className="row">
                <div className="column-1">
                    <img src={AboutImg} />
                </div>
                <div className="column-2">
                    <h1>About</h1>
                </div>
            </div>
            <style jsx>{`

        `}</style>

        </LayoutNoLogo>
    )
}

export default About;

next.js

来源：https://stackoverflow.com/questions/60929530/importing-svg-in-nextjs

3条答案

按热度按时间

py49o6xq1#

我终于在我的项目中使用了file-loader来使用SVG图像。
1.安装webpack和file loader：yarn add webpack、yarn add file-loader -D
1.在next.config.js中：

module.exports = {
    //...other configs
    webpack: (config, {}) => {
        config.module.rules.push({
                test: [/\.svg$/, /\.woff$/],
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:8].[ext]',
                    publicPath: `/_next/static/images/`, //specify the base path
                    outputPath: 'static/images', //and output path
                }
        })
    }
}

1.现在我可以使用import img from '../assets/image.svg'

赞(0）回复(0）举报 2023-10-18

hujrc8aj2#

使用next-images并添加正确的模块导出允许我使用所有文件类型的图像。
https://www.npmjs.com/package/next-images

赞(0）回复(0）举报 2023-10-18

kiz8lqtg3#

使用nextjs13测试解决方案

1.安装加载程序：yarn add @svgr/webpack
1.更新next.config.js

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

    return config;
  },

检查fill prop（attribute）（svg，path等）并将所有值替换为currentColor以扩展当前文本颜色（来自css）。你也可以从子标签中删除所有填充属性，并从父svg中扩展它。

<svg ... fill="currentColor">
...
</svg>

CSS：

.icons-wrapper { color: red } /* fill all icons to red */

我更喜欢在组件中动态导入图标：

type AvailableIcons =
  | 'facebook' // ./svg/facebook.svg
  | 'google';

interface IProps {
  name?: AvailableIcons;
  style?: React.CSSProperties;
  className?: string;
  width?: number;
  height?: number;
}

export const Icon = async ({ name, width, height, ...iconProps }: IProps) => {
  try {
    const Icon = await import(`./svg/${name}.svg`).then((icon) => icon.default); // lazy import
    return <Icon id={`svg-${name}`} width={width} height={height || width} {...iconProps} />;
  } catch (e) {
    return <>[Icon `{name}` not found!]</>;
  }
};

你也可以直接导入svg组件：

import Logo from './svg/logo.svg'

const YourTestComponent = () => <>
   ...
   <Logo /* override props */ />
   ...
</>

赞(0）回复(0）举报 2023-10-18

我来回答

在NextJS中导入SVG

3条答案

使用nextjs13测试解决方案

相关问题

热门标签

最新问答