Эффективно ли импортировать несколько похожих источников в SVG?

Question

Я собираюсь импортировать кучу иллюстраций SVG в свой проект в виде встроенных компонентов SVG, используя новую функцию create-реагировать-приложение @ 2.0.0.

Вот мой svg-import.js:

import React from 'react';

import { ReactComponent as StartLogo } from '../images/start/logo.svg';
import { ReactComponent as StartTitle } from '../images/start/title.svg';
...

import { ReactComponent as IntroAvatar } from '../images/intro/avatar.svg';
import { ReactComponent as IntroDialog } from '../images/intro/dialog.svg';
...

const svgIllustrations = {
  "start": {
    "logo": <StartLogo className="svg svg-start-logo"/>,
    "title": <StartTitle className="svg svg-start-title"/>,
    ...
  },
  "intro": {
    "avatar": <IntroAvatar className="svg svg-intro-avatar"/>,
    "dialog": <IntroDialog className="svg svg-intro-dialog"/>,
    ...
  }
}

export default svgIllustrations;

Когда я хочу их использовать:

import svgIllustrations from '../svg-import.js';

...
render() {
  return (
    {svgIllustrations.start["logo"]}
  )
}

Код работает.

Однако, поскольку существует много файлов SVG, которые необходимо импортировать, ивсе они названы и структурированы по определенному правилу, мне интересно, есть ли лучший способ сделать что-то подобное.

Answer 1

Если бы я был лично, я бы, вероятно, покончил с промежуточными svgIllustrations и просто импортировал svgs прямо из каталога images, где бы я ни хотел их использовать.Ваш объект в основном копирует файловую структуру, поэтому я не вижу, что на самом деле покупает все svg в одном месте.Импорт их напрямую также может помочь, когда дело доходит до разделения кода;в текущей настройке, которую вы предлагаете, вы должны загрузить все svg, чтобы отобразить один из них.Если вы импортируете их непосредственно из каталога изображений, вы можете разделить страницу, и вы будете загружать только svg для этой страницы.Это может не беспокоить в зависимости от размера вашего приложения и количества svg, которые вы загружаете.

Сказав, что, если вы все еще действительно хотите это представление объекта для всех ваших svg, единственное, что я хотел быскажем, вы, возможно, захотите сделать, это сгенерировать svgIllustrations из вашего каталога изображений.Поскольку ваша объектная структура в основном является копией вашей файловой структуры, это, вероятно, будет довольно легко сделать, и, возможно, сэкономит вам немного времени.