Обычно, чтобы включить большинство моих значков SVG, требующих простого стиля, я делаю:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Сейчас я играю с ReactJS в последнее время его оценки в качестве возможного компонента в моем новом стеке развития фронтального однако я заметил , что в списке поддерживаемых тегов / атрибутов, ни use
или xlink:href
поддерживаются.
Можно ли использовать svg-спрайты и загружать их таким образом в ReactJS?
<use xlinkHref="/svg/svg-sprite#my-icon" />
.xlink:href
устарел, теперь предполагается просто использоватьhref
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:hrefxlink:href
поэтому нам все еще нужно его использовать. Реальные веб-приложения должны либо использовать общий знаменатель функций браузера, либо реализовывать определенные обходные пути / полифиллы.Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>
Ответы:
Обновление в сентябре 2018 года : это решение устарело, вместо этого прочтите ответ Джона .
-
Реагировать не поддерживает все теги SVG , как вы говорите, есть список поддерживаемых тегов здесь . Они работают над более широкой поддержкой, например, в этом тикете .
Распространенный обходной путь - вставить HTML вместо неподдерживаемых тегов, например:
источник
dangerouslySetInnerHTML
. Вы можете использовать,xlinkHref
как указано ниже.MDN утверждает, что
xlink:href
это устаревшее решение в пользуhref
. Вы должны иметь возможность использоватьhref
атрибут напрямую. Пример ниже включает обе версии.Начиная с React 0.14 ,
xlink:href
он доступен через React как свойствоxlinkHref
. Он упоминается как одно из «заметных улучшений» в примечаниях к выпуску 0.14.Обновление 2018-06-09: добавлена информация об атрибутах
href
vsxlink:href
и обновлен пример, чтобы включить оба. Спасибо @devuxerОбновление 3 : на момент написания, свойства SVG React master можно найти здесь .
Обновление 2 : похоже, что все атрибуты svg теперь должны быть доступны через реакцию (см. Объединенный атрибут svg PR ).
Обновление 1. Возможно, вы захотите следить за проблемой, связанной с svg, на GitHub, чтобы получить дополнительную поддержку SVG. Есть разработки в работе.Демо:
источник
xlink:href
устарел, и рекомендуется использоватьhref
без префикса пространства имен. (Обратите внимание, однако, если вы используете TypeScript, типизация еще не обновлена, чтобы отразить это.)Если вы столкнулись
xlink:href
, то вы можете получить эквивалент в ReactJS пути удаления толстого кишечника и camelcasing добавленного текста:xlinkHref
.Вы, вероятно, в конечном итоге будете использовать другие теги пространства имен в SVG, например
xml:space
, и т. Д. То же правило применяется к ним (т.е.xml:space
становитсяxmlSpace
).источник
Как уже было сказано в ответе Джона Суррелла, теперь поддерживаются теги использования. Если вы не используете JSX, вы можете реализовать это следующим образом:
источник
Я создал небольшого помощника, который помогает решить эту проблему: https://www.npmjs.com/package/react-svg-use
сначала
npm i react-svg-use -S
тогда простои тогда будет создана следующая разметка
источник
SVG можно импортировать и использовать непосредственно как компонент React в вашем коде React.
источник