Add NcIconSvgWrapper to public API

l10n/messages.pot

@@ -62,9 +62,6 @@ msgstr ""
 msgid "Error getting related resources"
 msgstr ""
 
-msgid "Error parsing svg"
-msgstr ""
-
 msgid "External documentation for {title}"
 msgstr ""
 

src/components/NcListItemIcon/NcIconSvgWrapper.vue → src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue

@@ -20,20 +20,85 @@
   -
 -->
 
+<docs>
+### Description
+
+Render raw SVG string icons.
+
+### Example
+
+```vue
+<template>
+	<div class="grid">
+		<NcButton>
+			<template #icon>
+				<NcIconSvgWrapper :svg="closeSvg" title="Close" />
+			</template>
+		</NcButton>
+		<NcButton>
+			<template #icon>
+				<NcIconSvgWrapper :svg="cogSvg" title="Cog" />
+			</template>
+		</NcButton>
+		<NcButton>
+			<template #icon>
+				<NcIconSvgWrapper :svg="plusSvg" title="Plus" />
+			</template>
+		</NcButton>
+		<NcButton>
+			<template #icon>
+				<NcIconSvgWrapper :svg="sendSvg" title="Send" />
+			</template>
+		</NcButton>
+		<NcButton>
+			<template #icon>
+				<NcIconSvgWrapper :svg="starSvg" title="Star" />
+			</template>
+		</NcButton>
+	</div>
+</template>
+
+<script>
+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'
+
+export default {
+	data() {
+		return {
+			closeSvg,
+			cogSvg,
+			plusSvg,
+			sendSvg,
+			starSvg,
+		}
+	},
+}
+</script>
+
+<style>
+.grid {
+	display: grid;
+	grid-template-columns: repeat(5, max-content);
+	gap: 10px;
+}
+</style>
+```
+</docs>
+
 <template>
 	<span class="icon-vue"
 		role="img"
 		:aria-hidden="!title"
 		:aria-label="title"
-		v-html="htmlString" /> <!-- eslint-disable-line vue/no-v-html -->
+		v-html="cleanSvg" /> <!-- eslint-disable-line vue/no-v-html -->
 </template>
 
 <script>
 import { sanitizeSVG } from '@skjnldsv/sanitize-svg'
 
-import { t } from '../../l10n.js'
-import logger from '../../utils/logger.js'
-
 export default {
 	name: 'NcIconSvgWrapper',
 
@@ -51,13 +116,11 @@ export default {
 	data() {
 		return {
 			cleanSvg: '',
-			htmlString: '',
 		}
 	},
 
 	async beforeMount() {
 		await this.sanitizeSVG()
-		this.renderHtmlString()
 	},
 
 	methods: {
@@ -67,32 +130,6 @@ export default {
 			}
 			this.cleanSvg = await sanitizeSVG(this.svg)
 		},
-
-		renderHtmlString() {
-			if (!this.cleanSvg) {
-				return
-			}
-
-			const parser = new DOMParser()
-			const parsedDocument = parser.parseFromString(this.cleanSvg, 'image/svg+xml')
-
-			const errorNode = parsedDocument.querySelector('parsererror')
-			if (errorNode) {
-				logger.error(t('Error parsing svg'), errorNode)
-			}
-			const element = parsedDocument.documentElement
-			element.classList.add('icon-vue__svg')
-
-			if (this.title) {
-				const titleElement = document.createElement('title')
-				titleElement.textContent = this.title
-				if (element.firstElementChild) {
-					element.firstElementChild.prepend(titleElement)
-				}
-			}
-
-			this.htmlString = element.outerHTML
-		},
 	},
 }
 </script>
@@ -106,7 +143,7 @@ export default {
 	height: 44px;
 	opacity: 1;
 
-	&:deep(.icon-vue__svg) {
+	&:deep(svg) {
 		fill: currentColor;
 		max-width: 20px;
 		max-height: 20px;

src/components/NcIconSvgWrapper/index.js

@@ -0,0 +1,23 @@
+/**
+ * @copyright 2023 Christopher Ng <chrng8@gmail.com>
+ *
+ * @author Christopher Ng <chrng8@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export { default } from './NcIconSvgWrapper.vue'

src/components/NcListItemIcon/NcListItemIcon.vue

@@ -99,7 +99,7 @@ It might be used for list rendering or within the multiselect for example
 <script>
 import NcAvatar from '../NcAvatar/index.js'
 import NcHighlight from '../NcHighlight/index.js'
-import NcIconSvgWrapper from './NcIconSvgWrapper.vue'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 import { userStatus } from '../../mixins/index.js'
 

src/components/index.js

@@ -65,6 +65,7 @@ export { default as NcEmojiPicker } from './NcEmojiPicker/index.js'
 export { default as NcEmptyContent } from './NcEmptyContent/index.js'
 export { default as NcGuestContent } from './NcGuestContent/index.js'
 export { default as NcHeaderMenu } from './NcHeaderMenu/index.js'
+export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'
 // Not exported on purpose
 // export { default as NcInputField } from './NcInputField/index.js'
 export { default as NcListItem } from './NcListItem/index.js'