Передача заголовка в svg с помощью vite-plugin-svgr
Я пытаюсь передать заголовок и <svg> использовать vite-plugin-svgr и не могу найти способ сделать это.
Я знаю, что сам <svg> не имеет атрибута title и что для того, чтобы передать заголовок <svg>, мне нужно передать элемент <title> как первый дочерний элемент. Как лучше всего добиться этого без использования ref?
Как я пытался передать заголовок (не работает):
import { ReactComponent as Icon} from "./icon.svg";
...
return <Icon title = "icon title" />
Я также попробовал передать элемент <title> с помощью React.cloneElement(), но это тоже не работает:
import { ReactComponent as Icon} from "./icon.svg";
...
return cloneElement(<Icon />, undefined, <title>icon title</title>);
пример:
<!-- circle.svg -->
<svg height = "100" width = "100" xmlns = "http://www.w3.org/2000/svg">
<circle r = "45" cx = "50" cy = "50" fill = "red" />
</svg>
// Icon.jsx
import { ReactComponent as Circle } from "./assets/circle.svg"
const Icon = () => {
return (
<div>
<Circle title='icon title' />
</div>
);
};
Окончательный ДОМ:
<svg height = "100" width = "100" xmlns = "http://www.w3.org/2000/svg" title = "icon title">
<circle r = "45" cx = "50" cy = "50" fill = "red"></circle>
</svg>
Если я не ошибаюсь, в примерах выше вообще не используйте svgr . По-видимому, таким образом svg «функционирует как элемент изображения […] и не может быть настроен с помощью реквизита». Вот пример как использовать SVGR для импорта SVG. Таким образом, первый пример кода должен работать.
@Энди, я хочу передать заголовок, чтобы использовать всплывающую подсказку браузера... и я не понимаю, что вы подразумеваете под «если какой-либо элемент <title> уже присутствует».
Импортируемый вами SVG-файл может уже содержать заголовок.
Я проверил, там нет названия.
Ну это не имеет особого значения. Я считаю, что ваша проблема заключается во втором комментарии. Вы это посмотрели?
Я посмотрел на него и, насколько мне известно, vite-plugin-svgr использует svgr под капотом для преобразования svg в компонент реагирования. и мне не нужно использовать тег <img />.
Вы проверяли окончательный вариант DOM в своем браузере? Пожалуйста, постарайтесь предоставить Минимальный воспроизводимый пример в вопросе, чтобы мы могли исследовать.
Я еще раз посмотрел на вопрос и понял, что вам удалось передать атрибут title, я прав? Почему вы хотите передать элемент <title> SVG?
Я передаю заголовок в качестве реквизита, но он не отображается в окончательном рендере DOM. Я пытаюсь передать заголовок, чтобы, когда пользователь наводит курсор на SVG, всплывающая подсказка браузера отображала заголовок.
Спасибо за ответ, но я это понял. Чего я не сделал, так это того, что браузер (по крайней мере, Firefox) не делает этого для атрибута title, что удивительно. Я оставлю этот вопрос другим, пока интерактивный пример кода не облегчит задачу.
Атрибут title ничего не делает с элементом <svg>. Чтобы передать заголовок, первым дочерним элементом элемента <svg> должен быть элемент <title>.
Ответы 1
Передача заголовка не включена по умолчанию с помощью vite-plugin-svgr, чтобы передать заголовок в конфигурации svgr, вам нужно установить titleProp на true следующим образом:
svgr({
svgrOptions: {
titleProp: true,
},
});
Таким образом, svgr преобразует атрибут title в тег <title>.
Если вам нужно дать значку доступное имя, попробуйте
<Icon aria-label = "icon title">. Но это не повлияет на всплывающую подсказку браузера, если какой-либо элемент<title>уже присутствует. Было бы здорово, если бы вы предоставили нам интерактивный образец кода для изучения.