Merge pull request #4643 from nextcloud-libraries/feat/noid/svg-path

feat(NcIconSvgWrapper): allow to render raw svg paths

package.json

@@ -111,6 +111,7 @@
     "@babel/preset-typescript": "^7.22.5",
     "@cypress/vue2": "^2.0.1",
     "@fontsource/roboto": "^5.0.0",
+    "@mdi/js": "^7.3.67",
     "@mdi/svg": "^7.0.96",
     "@nextcloud/babel-config": "^1.0.0",
     "@nextcloud/browserslist-config": "^3.0.0",

src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue

@@ -47,12 +47,12 @@ Render raw SVG string icons.
 		</NcButton>
 		<NcButton aria-label="Send">
 			<template #icon>
-				<NcIconSvgWrapper :svg="sendSvg" name="Send" />
+				<NcIconSvgWrapper :path="mdiSend" name="Send" />
 			</template>
 		</NcButton>
 		<NcButton aria-label="Star">
 			<template #icon>
-				<NcIconSvgWrapper :svg="starSvg" name="Star" />
+				<NcIconSvgWrapper :path="mdiStar" name="Star" />
 			</template>
 		</NcButton>
 	</div>
@@ -62,17 +62,17 @@ Render raw SVG string icons.
 import closeSvg from '@mdi/svg/svg/close.svg?raw'
 import cogSvg from '@mdi/svg/svg/cog.svg?raw'
 import plusSvg from '@mdi/svg/svg/plus.svg?raw'
-import sendSvg from '@mdi/svg/svg/send.svg?raw'
-import starSvg from '@mdi/svg/svg/star.svg?raw'
+import { mdiSend } from '@mdi/js'
+import { mdiStar } from '@mdi/js'
 
 export default {
 	data() {
 		return {
 			closeSvg,
 			cogSvg,
 			plusSvg,
-			sendSvg,
-			starSvg,
+			mdiSend,
+			mdiStar,
 		}
 	},
 }
@@ -89,10 +89,14 @@ export default {
 </docs>
 
 <template>
-	<span class="icon-vue"
-		role="img"
-		:aria-hidden="!name ? true : undefined"
-		:aria-label="name || undefined"
+	<span v-if="!cleanSvg"
+		v-bind="attributes">
+		<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+			<path :d="path" />
+		</svg>
+	</span>
+	<span v-else
+		v-bind="attributes"
 		v-html="cleanSvg" /> <!-- eslint-disable-line vue/no-v-html -->
 </template>
 
@@ -119,11 +123,19 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+		 */
+		path: {
+			type: String,
+			default: '',
+		},
 	},
 
 	computed: {
 		cleanSvg() {
-			if (!this.svg) {
+			if (!this.svg || this.path) {
 				return
 			}
 
@@ -142,6 +154,14 @@ export default {
 
 			return svgDocument.documentElement.outerHTML
 		},
+		attributes() {
+			return {
+				class: 'icon-vue',
+				role: 'img',
+				'aria-hidden': !this.name ? true : undefined,
+				'aria-label': this.name || undefined,
+			}
+		},
 	},
 }
 </script>