Вставить сопоставленные SVG в React - PullRequest
Новая
       86

Вставить сопоставленные SVG в React

0 голосов
/ 18 июня 2020

Я занимаюсь своим первым большим проектом React, и я уже потратил день на решение этой, казалось бы, простой проблемы. Прошу прощения за ошибки в моей терминологии.

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

export function Example(props) {
  return (
    <svg viewBox='0 0 100 100' {...props}>
      <g fill='#000000'>
        <path d='long path here' />
      </g>
    </svg>
  );
}

Они помещены в средство выбора, которое само по себе заняло целый день, чтобы понять это. Проблема в том, что я пытаюсь сопоставить их, чтобы выбрать один значок и чтобы они отображались после сопоставления, но я не могу понять, как. 

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
    < Example>
    </IconMap>
  );
})}

Значит, они отображаются, если я просто напишите, но не с помощью <{icon /> или просто {icon}. Как я могу получить отображаемый значок для рендеринга? Я также совершенно уверен, что они, так сказать, «там», потому что я могу навести указатель мыши на то место, где они должны быть, и приблизительно изменить цвет фона при наведении.

Я пробовал различные средства, и что-то, что сработало бы, было бы, если бы я изменил свой файл значков, чтобы вместо этого возвращать данные svg в качестве переменной, а затем у меня был бы отдельный компонент значка, который его отображал, поэтому я бы по существу написал, но похоже, что он должен быть более простой способ, при котором мне не нужно переписывать сотни иконок?

И, возможно, это совершенно отдельный вопрос, но поскольку это то, что я изучал в связи с решая эту проблему, включаю. Я использую reactstrap для этого проекта, и если можно было бы сделать «сборщик» в reactstrap, например кнопку раскрывающегося списка или форму, где параметры будут отображаться в таблице, а не в списке (вертикальный список Более 100 значков - это много прокрутки), я бы с удовольствием закодировал все это жестко, чтобы оно работало в reactstrap с остальной частью моего кода.

Большое вам спасибо и ура!

1 Ответ

0 голосов
/ 18 июня 2020

Не уверен, правильно ли я понял ваш вопрос, вы пытаетесь генерировать значки динамически? Если это так, это один из способов, которым вы можете это сделать 

import Icon1 from 'icons/icon1.svg';
import Icon2 from 'icons/icon2.svg';

const Icon = (props) => {
  const getIcon = name => {
    return {
      icon1: Icon1,
      icon2: Icon2,
    }
  }

  const IconComponent = getIcon(props.name);
  return (
    <IconComponent />
  );
}

Затем вы используете его в своем компоненте следующим образом 

{icons.map((icon, index) => {
  return (
    <IconMap
      key={index}
        onClick={() => {
        selectIcon(icon);
      }}
    >
      <Icon name={icon.name}>
    </IconMap>
  );
})}
...