Встраивать SVG в JSX во время сборки?

Question

Я относительно новичок в React, использую create-Reaction-app для создания простых прототипов.Я хотел бы иметь возможность экспортировать SVG из Sketch или аналогичного инструмента проектирования и использовать их в своем приложении React, встроенном непосредственно в JSX, поскольку это позволяет стилизовать его с помощью CSS.

Это относительно просто с небольшимусилие: скопировать экспортированный код SVG из исходного файла .svg, настроить имя атрибутов xmlns, готово.

Но если у меня много изображений и я часто их повторяю, это становится невероятно высоким-effort.Я хотел бы получить способ взять каталог SVG во время сборки и в основном объединить их в один файл .js, например,

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

Это относительно тривиально сделать с помощью сценария оболочки или чего-то еще, нобыло бы здорово интегрироваться в процесс сборки.Как бы я поступил так?

Спасибо!

Answer 1

Начиная с версии 2 create-реакции-приложения, вы можете импортировать SVG-файлы напрямую как компоненты React.Поскольку вы только начинаете разработку и, вероятно, недавно установили пакет create-реагировать-приложение и не будете испытывать никаких побочных эффектов при обновлении до новой версии create-реагировать-приложение, просто отредактируйте response-scripts введите в package.json "react-scripts": "^2.0.3" и выполните npm install или yarn install.

. Тогда вы сможете сделать это:

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

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

Источник: readme для GitHub-приложения для создания-реакции-приложения