✨ Improve customizability of Icon component

Author: Frontendland

README.md

@@ -284,6 +284,7 @@ import { Accordion } from 'webcoreui/react'
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
 - [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)
 - [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
+- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)
 - [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
 - [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)
 - [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)

src/blocks/Icon/Icon.astro

@@ -0,0 +1,10 @@
+---
+import IconComponent from '@components/Icon/Icon.astro'
+
+import type { CustomIconProps } from './icon'
+import iconSet from './iconSet'
+
+interface Props extends CustomIconProps {}
+---
+
+<IconComponent iconSet={iconSet} {...Astro.props} />

src/blocks/Icon/Icon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import IconComponent from '@components/Icon/Icon.svelte'
+
+    import type { CustomIconProps } from './icon'
+    import iconSet from './iconSet'
+
+    const props: CustomIconProps = $props()
+</script>
+
+<IconComponent iconSet={iconSet} {...props} />

src/blocks/Icon/Icon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import IconComponent from '@components/Icon/Icon.tsx'
+
+import type { CustomIconProps } from './icon'
+import iconSet from './iconSet'
+
+const Icon = (props: CustomIconProps) => <IconComponent iconSet={iconSet} {...props} />
+
+export default Icon

src/blocks/Icon/icon.ts

@@ -0,0 +1,20 @@
+import type { IconProps } from 'webcoreui/astro'
+
+export type CustomIconProps = {
+    type: 'astro'
+    | 'components'
+    | 'config'
+    | 'cookie'
+    | 'discord'
+    | 'drag'
+    | 'edit'
+    | 'file'
+    | 'lock'
+    | 'lock-open'
+    | 'react'
+    | 'rocket'
+    | 'svelte'
+    | 'swatches'
+    | 'terminal'
+    | IconProps['type']
+} & Omit<IconProps, 'type'>

src/blocks/Icon/iconSet.ts

@@ -0,0 +1,35 @@
+import Astro from './icons/astro.svg?raw'
+import Components from './icons/components.svg?raw'
+import Config from './icons/config.svg?raw'
+import Cookie from './icons/cookie.svg?raw'
+import Discord from './icons/discord.svg?raw'
+import Drag from './icons/drag.svg?raw'
+import Edit from './icons/edit.svg?raw'
+import File from './icons/file.svg?raw'
+import Lock from './icons/lock.svg?raw'
+import LockOpen from './icons/lock-open.svg?raw'
+import React from './icons/react.svg?raw'
+import Rocket from './icons/rocket.svg?raw'
+import Svelte from './icons/svelte.svg?raw'
+import Swatches from './icons/swatches.svg?raw'
+import Terminal from './icons/terminal.svg?raw'
+
+const iconSet = {
+    'astro': Astro,
+    'components': Components,
+    'config': Config,
+    'cookie': Cookie,
+    'discord': Discord,
+    'drag': Drag,
+    'edit': Edit,
+    'file': File,
+    'lock': Lock,
+    'lock-open': LockOpen,
+    'react': React,
+    'rocket': Rocket,
+    'svelte': Svelte,
+    'swatches': Swatches,
+    'terminal': Terminal
+}
+
+export default iconSet