feat: add the CIconSvg component to allow adding custom SVG icons

Author: mrholek

src/CIconSvg.ts

@@ -0,0 +1,71 @@
+import { cloneVNode, defineComponent } from 'vue'
+
+const CIconSvg = defineComponent({
+  name: 'CIconSvg',
+  props: {
+    /**
+     * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.
+     */
+    customClassName: [String, Array, Object],
+    /**
+     * The height attribute defines the vertical length of an icon.
+     */
+    height: Number,
+    /**
+     * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+     */
+    size: {
+      type: String,
+      validator: (value: string) => {
+        return [
+          'custom',
+          'custom-size',
+          'sm',
+          'lg',
+          'xl',
+          'xxl',
+          '3xl',
+          '4xl',
+          '5xl',
+          '6xl',
+          '7xl',
+          '8xl',
+          '9xl',
+        ].includes(value)
+      },
+    },
+    /**
+     * Title tag content.
+     */
+    title: String,
+    /**
+     * The width attribute defines the horizontal length of an icon.
+     */
+    width: Number,
+  },
+  setup(props, { attrs, slots }) {
+    return () =>
+      slots.default &&
+      slots.default().map((slot) =>
+        cloneVNode(slot, {
+          'aria-hidden': true,
+          class: [
+            props.customClassName || [
+              'icon',
+              {
+                [`icon-${props.size}`]: props.size,
+                [`icon-custom-size`]: props.height || props.width,
+              },
+              attrs.class,
+            ],
+          ],
+          height: props.height,
+          focusable: 'false',
+          role: 'img',
+          width: props.width,
+          ...attrs,
+        }),
+      )
+  },
+})
+export { CIconSvg }

src/index.ts

@@ -1,3 +1,4 @@
 import { CIcon } from './CIcon'
-export { CIcon }
+import { CIconSvg } from './CIconSvg'
+export { CIcon, CIconSvg }
 export default CIcon