Эффективно импортировать несколько похожих источников svg в приложение create-react-app?

Я собираюсь импортировать несколько иллюстраций SVG в свой проект в виде встроенных компонентов SVG, используя новую функцию create-react-app @ 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, которые нужно импортировать, и все они названы и структурированы в соответствии с определенным правилом, мне интересно, есть ли лучший способ сделать что-то подобное.


reactjs create-react-app svg import
person Kent Yang    schedule 15.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person TLadd    schedule 15.09.2018
comment
Спасибо за совет! - person Kent Yang; 15.09.2018