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); + } + }, }, };