在Gatsby打字稿中使用SVG时出错 [英] Error while using SVG in Gatsby Typescript

问题描述

在这里，我尝试在Gatsby的打字页面中使用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>
);

获取👇时出错

推荐答案

gatsby-plugin-react-svg的包含规则是与文件夹名称匹配的正则表达式(因此使用斜杠/path/)。更改为：

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

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

这篇关于在Gatsby打字稿中使用SVG时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！