在 Gatsby Typescript 中使用 SVG 时出错

Question

Here I'm trying to use SVG in Gatsby's Typescript page. I'm using this plugin 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>
);

error I'm getting

Answer 1

The including rule for gatsby-plugin-react-svg is a regular expression that match a folder name (hence the slashes, /path/ ). Change it to:

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

In addition, keep in mind that /svg/ must only contain SVG assets.