Не могу найти, как импортировать библиотеку иконок SVG в React

Question

Я изучил множество вопросов Stackoverflow или искал статьи.Но я могу найти только пакеты npm и хочу избежать использования слишком большого количества пакетов в моем проекте. Все, что я прошу, - это некоторые рекомендации, статьи, посты в блогах, ссылки, все, что может помочь мне достичь того, чего я хочу.

Что я хочу

Динамически импортировать 50+значки SVG в качестве компонентов в React;готов к использованию.Причина в том, что когда значок svg заменяется именем, которое осталось прежним, он немедленно обновляет все версии иконок в моем приложении.Дополнительно: возможно ли упаковать это для использования в других проектах;это было бы удивительно.

То, что я сейчас делаю

Ниже то, что я сейчас делаю;но это сумасшедшая работа для 50 иконок, которые могут однажды обновиться.

import React from 'react';

const getViewBox = name => {
  switch (name) {
    case 'mouseScroll':
    return '0 0 70 130'
    default:
      return '0 0 50 50';
  }
};

const icons = (name, props) => {
  switch (name) {
    case 'loading':
      return (
        <g>
          <path {...props} d="M25,50C11.2,50,0,38.8,0,25S11.2,0,25,0c0.8,0,1.5,0.7,1.5,1.5S25.8,3,25,3C12.9,3,3,12.9,3,25s9.9,22,22,22
            c12.1,0,22-9.9,22-22c0-0.8,0.7-1.5,1.5-1.5S50,24.2,50,25C50,38.8,38.8,50,25,50z"/>
        </g>
      );
    case 'mouseScroll':
      return (
        <g fill="none" fill-rule="evenodd">
          <rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="5" rx="36"/>
          <circle className="scroll" cx="38.5" cy="33.5" r="6.5" fill="#FFF"/>
        </g>
      );
    default:
      return '';
  }
};

const SVGIcon = ({
  name = '',
  style = {},
  fill = 'currentColor',
  viewBox = '',
  width = '20px',
  className = 'icon icon' + name,
  height = '20px'
}) => (
  <svg
    width={width}
    style={style}
    height={height}
    className={className}
    xmlns='http://www.w3.org/2000/svg'
    viewBox={viewBox || getViewBox(name)}
    xmlnsXlink='http://www.w3.org/1999/xlink'
  >
    {icons(name, { fill })}
  </svg>
);

export default SVGIcon;

Что мне почти помогло

Ответ пользователя skylize в этом вопросе Stackoverflow: Как импортировать всю папку изображений SVG (или как их динамически загрузить) в React Web App?

Но здесь svgs - это просто пути к файлам, которые будут использоваться в тегах

Answer 1

Используйте svgr , вы можете импортировать svg как компонент.

Если вы хотите избежать импорта пакета и «воссоздать колесо», посмотрите вИсходный код библиотеки, и вы найдете некоторые хорошие идеи.

Загляните внутрь этого репо svgr / core для вдохновения, код самодокументирован и прост для понимания.