diff --git a/README.md b/README.md
index 9816d25..47684ca 100644
--- a/README.md
+++ b/README.md
@@ -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)
@@ -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
+
+```
+
+```
+
#### - `transformSource`
Function to transform SVG source
diff --git a/src/index.js b/src/index.js
index 9bd2267..9cf641d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,6 +38,9 @@ const InlineSvgComponent = {
type: String,
required: true,
},
+ title: {
+ type: String,
+ },
transformSource: {
type: Function,
default: (svg) => svg,
@@ -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
@@ -138,6 +144,21 @@ const InlineSvgComponent = {
request.send();
});
},
+
+ /**
+ * Create or edit the
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;
+ } 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);
+ }
+ },
},
};