Merge pull request #4557 from nextcloud-libraries/fix/noid/svg-ios

package.json

@@ -73,11 +73,11 @@
     "@nextcloud/logger": "^2.2.1",
     "@nextcloud/router": "^2.0.0",
     "@nextcloud/vue-select": "^3.23.0",
-    "@skjnldsv/sanitize-svg": "^1.0.2",
     "@vueuse/components": "^10.0.2",
     "@vueuse/core": "^10.1.2",
     "clone": "^2.1.2",
     "debounce": "1.2.1",
+    "dompurify": "^3.0.5",
     "emoji-mart-vue-fast": "^15.0.0",
     "escape-html": "^1.0.3",
     "floating-vue": "^1.0.0-beta.19",

src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue

@@ -97,7 +97,7 @@ export default {
 </template>
 
 <script>
-import { sanitizeSVG } from '@skjnldsv/sanitize-svg'
+import DOMPurify from 'dompurify'
 
 export default {
 	name: 'NcIconSvgWrapper',
@@ -113,22 +113,12 @@ export default {
 		},
 	},
 
-	data() {
-		return {
-			cleanSvg: '',
-		}
-	},
-
-	async beforeMount() {
-		await this.sanitizeSVG()
-	},
-
-	methods: {
-		async sanitizeSVG() {
+	computed: {
+		cleanSvg() {
 			if (!this.svg) {
 				return
 			}
-			this.cleanSvg = await sanitizeSVG(this.svg)
+			return DOMPurify.sanitize(this.svg)
 		},
 	},
 }
@@ -145,6 +135,8 @@ export default {
 
 	&:deep(svg) {
 		fill: currentColor;
+		width: 20px;
+		height: 20px;
 		max-width: 20px;
 		max-height: 20px;
 	}