Skip to content

Add "title" prop to set/overwrite SVG title #18

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Jul 24, 2020
Merged

Add "title" prop to set/overwrite SVG title #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcbce9c
Add title prop for setting SVG's title
Jun 29, 2020
254819b
Add title prop to docs
Jun 29, 2020
58e501c
Set title for each use
Jul 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Loaded SVGs are cached so it will not make network request twice.
- [Usage](#usage)
- [props](#props)
- [src](#--src)
- [title](#--title)
- [transformSource](#--transformsource)
- [SVG attributes](#svg-attributes)
- [events](#events)
Expand Down Expand Up @@ -110,6 +111,13 @@ Learn more:
- https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
- https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

#### - `title`
Sets/overwrites the title of the SVG

```
<inline-svg :src="image.svg" :title="My Image"/>
```

#### - `transformSource`
Function to transform SVG source

Expand Down
21 changes: 21 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ const InlineSvgComponent = {
type: String,
required: true,
},
title: {
type: String,
},
transformSource: {
type: Function,
default: (svg) => svg,
Expand Down Expand Up @@ -86,6 +89,9 @@ const InlineSvgComponent = {
for (let i = attrs.length - 1; i >= 0; i--) {
this.svgAttrs[attrs[i].name] = attrs[i].value;
}
if (this.title) {
this.setTitle(svg);
}
// copy inner html
this.svgContent = svg.innerHTML;
// render svg element
Expand Down Expand Up @@ -138,6 +144,21 @@ const InlineSvgComponent = {
request.send();
});
},

/**
* Create or edit the <title> element of a SVG
* @param {Object} svg
*/
setTitle(svg) {
const titleTags = svg.getElementsByTagName('title');
if (titleTags.length) { // overwrite existing title
titleTags[0].innerHTML = this.title;
Copy link
Owner

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 &nbsp;. But titles are used for accessibility and screen readers. Usually they doesn't need these features.

Copy link
Contributor Author

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.

} else { // create a title element if one doesn't already exist
const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title');
titleEl.innerHTML = this.title;
svg.appendChild(titleEl);
}
},
},
};

Expand Down