Question

我对React还是比较陌生的，使用create-react-app构建简单的原型。我希望能够从Sketch或类似的设计工具中导出SVG，并在我的React应用中使用它们，这些应用直接嵌入JSX中，因为它允许通过CSS进行样式设计。

这是相对简单的，只需付出一点努力：将导出的SVG代码从原始.svg文件中复制出来，调整xmlns属性的命名方式，完成。

但是，如果我有很多图像并且经常对其进行迭代，那将变得非常费力。我想要一种在构建时获取SVG目录并将其基本连接到单个.js文件（例如

）的方法

const icons = {
    first: <svg>...contents of first svg file...</svg>,
    second <svg>...contents of second file...</svg>,
    ...
}

通过shell脚本之类的方法相对来说是微不足道的，但是将其集成到构建过程中将非常有用。我将如何去做这样的事情？

谢谢！

Answer 1

从create-react-app版本2开始，您可以将svg文件直接作为React组件导入。由于您刚刚开始开发，并且可能最近安装了create-react-app软件包，并且不会因更新到create-react-app的新版本而遭受任何可能的副作用，因此只需编辑 react-scripts 在package.json中输入，说出"react-scripts": "^2.0.3"并运行npm install或yarn install。

那么您就可以做到这一点：

import { ReactComponent as Logo } from './logo.svg';

const App = () => (
    <div>
        <Logo />
    </div>
);

Source: create-react-app Github page readme

在构建时将SVG嵌入JSX吗？

1 个答案: