Fixed #4271 - Baseicon: Content Security Policy (CSP) violation

components/lib/baseicon/BaseIcon.vue

@@ -1,38 +1,8 @@
 <script>
+import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
-export default {
+const styles = `
-    name: 'BaseIcon',
-    props: {
-        label: {
-            type: String,
-            default: undefined
-        },
-        spin: {
-            type: Boolean,
-            default: false
-        }
-    },
-    methods: {
-        pti() {
-            const isLabelEmpty = ObjectUtils.isEmpty(this.label);
-
-            return {
-                class: [
-                    'p-icon',
-                    {
-                        'p-icon-spin': this.spin
-                    }
-                ],
-                role: !isLabelEmpty ? 'img' : undefined,
-                'aria-label': !isLabelEmpty ? this.label : undefined,
-                'aria-hidden': isLabelEmpty
-            };
-        }
-    }
-};
-</script>
-<style>
 .p-icon {
     display: inline-block;
 }
@@ -63,4 +33,46 @@ export default {
         transform: rotate(359deg);
     }
 }
-</style>
+`;
+
+const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
+
+export default {
+    name: 'BaseIcon',
+    props: {
+        label: {
+            type: String,
+            default: undefined
+        },
+        spin: {
+            type: Boolean,
+            default: false
+        }
+    },
+    beforeMount() {
+        loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+    },
+    methods: {
+        pti() {
+            const isLabelEmpty = ObjectUtils.isEmpty(this.label);
+
+            return {
+                class: [
+                    'p-icon',
+                    {
+                        'p-icon-spin': this.spin
+                    }
+                ],
+                role: !isLabelEmpty ? 'img' : undefined,
+                'aria-label': !isLabelEmpty ? this.label : undefined,
+                'aria-hidden': isLabelEmpty
+            };
+        }
+    },
+    computed: {
+        $config() {
+            return this.$primevue?.config;
+        }
+    }
+};
+</script>