feat(NcIconSvgWrapper)!: remove ID from svg

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue

@@ -97,28 +97,60 @@ export default {
 </template>
 
 <script>
+import Vue from 'vue'
 import DOMPurify from 'dompurify'
 
 export default {
 	name: 'NcIconSvgWrapper',
 
 	props: {
+		/**
+		 * Raw SVG string to render
+		 */
 		svg: {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Label of the icon, used in aria-label
+		 */
 		name: {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * By default MDI icons have an ID on the `<svg>` element. It leads to dupliated IDs on a web-page.
+		 * This component removes the ID on the received SVG.
+		 * Use this prop to disable this behavior and to not remove the ID.
+		 */
+		keepId: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
 		cleanSvg() {
 			if (!this.svg) {
 				return
 			}
-			return DOMPurify.sanitize(this.svg)
+
+			const svg = DOMPurify.sanitize(this.svg)
+
+			const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')
+
+			if (svgDocument.querySelector('parsererror')) {
+				Vue.util.warn('SVG is not valid')
+				return ''
+			}
+
+			if (!this.keepId && svgDocument.documentElement.id) {
+				svgDocument.documentElement.removeAttribute('id')
+			}
+
+			return svgDocument.documentElement.outerHTML
 		},
 	},
 }