docs: iconbase

Author: gioboa

apps/docs/content/_components/iconbase.md

@@ -6,21 +6,13 @@
 
 Storefront UI ships with a default set of icons available with the naming convention `SfIcon{Name}`. Each icon is a component that extends the `SfIconBase` component.
 
-## List of icons
+<!-- ## List of icons
 
 List of all icons shipped with Storefront UI below. Click on any of the icons to copy its name.
 
 <Showcase showcase-name="IconBase/ListOfIcons"  allow="clipboard-write">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/IconBase/ListOfIcons.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/IconBase/ListOfIcons.tsx
-::
-::qwik-only
-<<<../../../website/src/routes/showcases/IconBase/ListOfIcons/index.tsx
-::
+<<<../../../website/src/routes/showcases/IconBase/ListOfIcons/index.tsx -->
 
 </Showcase>
 
@@ -32,15 +24,7 @@ All Icon components supports various sizes that can be set with the `size` prop:
 
 <Showcase showcase-name="IconBase/IconBaseSizes" style="min-height:300px">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/IconBase/IconBaseSizes.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/IconBase/IconBaseSizes.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/IconBase/IconBaseSizes/index.tsx
-::
 
 </Showcase>
 
@@ -50,98 +34,44 @@ All Icon components inherit the current text color using Tailwind's [`fill-curre
 
 <Showcase showcase-name="IconBase/IconBaseColors">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/IconBase/IconBaseColors.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/IconBase/IconBaseColors.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/IconBase/IconBaseColors/index.tsx
-::
 
 </Showcase>
 
 ### Custom icon
 
 The `SfIconBase` component supports displaying of a custom SVG icon.
 
-::vue-only
 You can pass SVG content either via `content` prop or as a default slot.
-::
-::react-only
-You can pass SVG content as children.
-::
-::qwik-only
-You can pass SVG content as children.
-::
 
 If you're using a custom icon, you need to specify either the `viewBox` or `width`/`height` attributes for the SVG to render correctly.
 
 <Showcase showcase-name="IconBase/CustomIcon">
 
-::vue-only
-<<<../../../preview/nuxt/pages/showcases/IconBase/CustomIcon.vue
-::
-::react-only
-<<<../../../preview/next/pages/showcases/IconBase/CustomIcon.tsx
-::
-::qwik-only
 <<<../../../website/src/routes/showcases/IconBase/CustomIcon/index.tsx
-::
 
 </Showcase>
 
 ## Notes
 
 Storefront UI icons are generated with use of [`createIcons.js`](https://github.com/vuestorefront/storefront-ui/blob/v2/createIcons.js) script and they are based on `IconBase` component.
 
-## Accessibility notes
+<!-- ## Accessibility notes
 
-When using an Icon without any additional label and/or description, you should specify an `aria-label` on the icon component.
+When using an Icon without any additional label and/or description, you should specify an `aria-label` on the icon component. -->
 
 ## Playground
 
 <Generate style="height: 380px" />
 
 #tab-2
 
-::vue-only
-| Prop name | Type | Default value | Possible values |
-|----------------|----------------------------------------|---------------|-----------------|
-| `size` | `SfIconSize` | `'base'` | `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'` |
-| `content` | `string` | | Content of and SVG, e.g. `<path d='...'/>` |
-::
-::react-only
-| Prop name | Type | Default value | Possible values |
-|----------------|----------------------------------------|---------------|-----------------|
-| `size` | `SfIconSize` | `'base'` | `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'` |
-| `children` | `ReactNode` | | Content of an SVG, e.g. `<path d='...'/>` |
-::
-::qwik-only
-| Prop name | Type | Default value | Possible values |
-|----------------|----------------------------------------|---------------|-----------------|
-| `size` | `SfIconSize` | `'base'` | `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'` |
-| `children` | `ReactNode` | | Content of an SVG, e.g. `<path d='...'/>` |
-::
-::vue-only
+| Prop name | Type         | Default value | Possible values                                                     |
+| --------- | ------------ | ------------- | ------------------------------------------------------------------- |
+| `size`    | `SfIconSize` | `'base'`      | `'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'` |
 
 ## Slots
 
-| Slot name | Description                                                                     |
-| --------- | ------------------------------------------------------------------------------- |
-| `default` | Content of an SVF, e.g. `<path d='...'/>`. Takes precedence over `content` prop |
-
-::
-#tab-3
-::vue-only
-<<<../../../../packages/sfui/frameworks/vue/components/SfIconBase/SfIconBase.vue
-::
-::react-only
-<<< ../../../../packages/sfui/frameworks/react/components/SfIconBase/SfIconBase.tsx
-::
-::qwik-only
-<<<../../../../dist/packages/qwik-storefront-ui/components/SfIconBase/SfIconBase.tsx
-::
-
-::
+| Slot name | Description                                |
+| --------- | ------------------------------------------ |
+| `default` | Content of an SVG, e.g. `<path d='...'/>`. |