-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add "title" prop to set/overwrite SVG title #18
Conversation
Thank you for the PR! I will try to take a look at the weekend |
I ran into one issue with this change. Since the title is set when the SVG is downloaded, you can't use the same image in 2 places with different titles. The first title that is set will always be used since the image is (nicely) only downloaded once and then cached. I'll look at moving the |
Updated with a better diff that sets the title each time the image is used (not just when the SVG is downloaded) |
Nice! I hope I will have some free time this week to review and publish it. |
setTitle(svg) { | ||
const titleTags = svg.getElementsByTagName('title'); | ||
if (titleTags.length) { // overwrite existing title | ||
titleTags[0].innerHTML = this.title; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking of replacing .innerHTML
with .innerText
.
It will prevent XSS.
On the other hand, it will disable inserting other tags or html entities, like
. But titles are used for accessibility and screen readers. Usually they doesn't need these features.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ooh, good point. I'd go with .innerText
instead.
Released under v2.0.0. Thank you again! |
Adds a
title
prop to allow setting the content of the SVG's<title>
element. If the SVG already has a title, it will be overwritten with the value of the prop. Otherwise, a<title>
is created and appended to the SVG.Fixes #3