在 Gatsby Typescript 中使用 SVG 时出错

IT技术 javascript reactjs typescript gatsby
2022-07-09 00:26:25

在这里，我尝试在 Gatsby 的 Typescript 页面中使用 SVG。我正在使用这个插件https://www.gatsbyjs.com/plugins/gatsby-plugin-react-svg/。

//gatsby-config.js
        {
            resolve: "gatsby-plugin-react-svg",
            options: {
                rule: {
                    include: `${__dirname}/src/svg/`,
                },
            },
        },

//test.tsx
import React from "react";
import Layout from "../components/layout";
import { Container } from "../components/box";
import SEO from "../components/seo";
import ReactSvg from "../svg/react.svg" ;


export default () => (
    <Layout>
        <SEO title="404: Not found" />
        <Container>
            <ReactSvg />
        </Container>
    </Layout>
);

我得到的错误👇

1个回答

的包含规则gatsby-plugin-react-svg是匹配文件夹名称的正则表达式（因此是斜线，/path/）。将其更改为：

    {
        resolve: "gatsby-plugin-react-svg",
        options: {
            rule: {
                include: `/svg/`,
            },
        },
    },

此外，请记住，它/svg/必须只包含 SVG 资产。

其它你可能感兴趣的问题
上一篇SyntaxError：使用酶运行摩卡时出现意外的保留字 下一篇如何在 MobX 中的每一个可能的变化上运行react回调？