@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/rioglyph.md

@@ -0,0 +1,331 @@
+# Rioglyph
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/rioglyph
+*Captured:* 2025-12-12T14:20:59.735Z
+
+The Rioglyph component is a React wrapper for the Rioglyph icon set. It provides a convenient and type-safe way to render icons without directly dealing with the utility classnames.
+
+## Rioglyph
+
+In addition to rendering a single icon, the component supports built-in features such as spinning and pulsing animations, as well as paired icons for combining multiple glyphs into one semantic symbol.
+
+The complete list of available icons and their names can be found in the icon library.
+
+### Example: Example 1
+
+Single rioglyph icon
+
+Single rioglyph icon with custom styles
+
+Single rioglyph icon with spinning animation
+
+Single rioglyph icon with pulsing animation
+
+Paired rioglyph icon
+
+Disabled styling
+
+Custom external svg icon
+
+#### Summary
+
+Single rioglyph icon
+
+Single rioglyph icon with custom styles
+
+Single rioglyph icon with spinning animation
+
+Single rioglyph icon with pulsing animation
+
+Paired rioglyph icon
+
+Disabled styling
+
+Custom external svg icon
+
+#### React (tsx)
+
+```tsx
+import Rioglyph, { type IconType } from '@rio-cloud/rio-uikit/Rioglyph';
+
+// Keep color classes typed to avoid typos when passing classNames.
+export type ColorClass =
+    | 'text-color-warning'
+    | 'text-color-danger'
+    | 'text-color-success'
+    | 'text-color-info'
+    | 'text-color-black'
+    | 'text-color-gray';
+
+// Single vehicle icons used across examples.
+const vehicleIcons: IconType[] = ['rioglyph-truck', 'rioglyph-bus', 'rioglyph-van', 'rioglyph-car'] as const;
+
+// Icons that visually make sense to spin.
+const spinnableIcons: IconType[] = [
+    'rioglyph-refresh',
+    'rioglyph-climate-control',
+    'rioglyph-cog',
+    'rioglyph-spinner',
+    'rioglyph-tire',
+] as const;
+
+/**
+ * Icons that pulse in color to indicate a status.
+ */
+type Icon = { icon: IconType; color: ColorClass };
+
+const pulsingIcons: Icon[] = [
+    { icon: 'rioglyph-battery-level-empty', color: 'text-color-danger' },
+    { icon: 'rioglyph-battery-level-low', color: 'text-color-warning' },
+    { icon: 'rioglyph-battery-level-full', color: 'text-color-success' },
+];
+
+/**
+ * Paired icons that combine a vehicle with its fuel type.
+ */
+type PairedIcon = Icon & { pairIcon: IconType };
+
+const pairedIcons: PairedIcon[] = [
+    { icon: 'rioglyph-truck', pairIcon: 'rioglyph-fuel-hydrogen', color: 'text-color-info' },
+    { icon: 'rioglyph-bus', pairIcon: 'rioglyph-fuel-electric', color: 'text-color-success' },
+    { icon: 'rioglyph-van', pairIcon: 'rioglyph-fuel-diesel', color: 'text-color-black' },
+    { icon: 'rioglyph-car', pairIcon: 'rioglyph-fuel-gas', color: 'text-color-black' },
+];
+
+export default () => (
+    <div className='display-flex flex-column gap-15'>
+        {/* Basic glyphs */}
+        <div>
+            <label>Single rioglyph icon</label>
+            <div className='display-flex gap-5 align-items-center text-size-18'>
+                {vehicleIcons.map(icon => (
+                    <Rioglyph icon={icon} key={icon} />
+                ))}
+            </div>
+        </div>
+
+        {/* Custom styling via className */}
+        <div>
+            <label>Single rioglyph icon with custom styles</label>
+            <div className='display-flex gap-5 align-items-center'>
+                {vehicleIcons.map(icon => (
+                    <Rioglyph icon={icon} size='h2' iconClassName='text-color-gray' key={icon} />
+                ))}
+            </div>
+        </div>
+
+        {/* Built-in spinning animation */}
+        <div>
+            <label>Single rioglyph icon with spinning animation</label>
+            <div className='display-flex gap-5 align-items-center'>
+                {spinnableIcons.map(icon => (
+                    <Rioglyph icon={icon} size='h2' spinning key={icon} />
+                ))}
+            </div>
+        </div>
+
+        {/* Pulsing animation + color */}
+        <div>
+            <label>Single rioglyph icon with pulsing animation</label>
+            <div className='display-flex gap-5 align-items-center'>
+                {pulsingIcons.map(({ icon, color }) => (
+                    <Rioglyph
+                        icon={icon}
+                        size='h2'
+                        pulsing={icon === 'rioglyph-battery-level-empty'}
+                        iconClassName={color}
+                        key={`${icon}-${color}`}
+                    />
+                ))}
+            </div>
+        </div>
+
+        {/* Main glyph paired with a secondary glyph (e.g., fuel type) */}
+        <div>
+            <label>Paired rioglyph icon</label>
+            <div className='display-flex gap-5 align-items-center'>
+                {pairedIcons.map(({ icon, pairIcon, color }) => (
+                    <Rioglyph
+                        icon={icon}
+                        size='h1'
+                        pairIcon={pairIcon}
+                        pairIconClassName={color}
+                        key={`${icon}-${pairIcon}`}
+                    />
+                ))}
+            </div>
+        </div>
+
+
+        {/* Disabled */}
+        <div>
+            <label>Disabled styling</label>
+            <div className='display-flex gap-5 align-items-center'>
+                <Rioglyph
+                        icon={'rioglyph-lock'}
+                        size='h2'
+                        disabled
+                    />
+                    <Rioglyph
+                        icon={'rioglyph-key'}
+                        size='h2'
+                        disabledInverse
+                    />
+                    <Rioglyph
+                        icon={'rioglyph-chat'}
+                        size='h2'
+                        disabledDanger
+                    />
+            </div>
+        </div>
+
+        {/* Custom external svg icon */}
+        <div>
+            <label>Custom external svg icon</label>
+            <div className='display-flex gap-5 align-items-center'>
+                <Rioglyph
+                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}
+                    size='h1'
+                    iconClassName='text-color-info'
+                />
+                <Rioglyph
+                    icon={'https://cdn.rio.cloud/images/uikit/react_logo.svg'}
+                    size='h1'
+                    pairIcon={'https://cdn.rio.cloud/images/uikit/number_19.svg'}
+                    pairIconClassName={'text-color-danger'}
+                />
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column gap-15">
+    <div>
+        <label>Single rioglyph icon</label>
+        <div class="display-flex gap-5 align-items-center text-size-18">
+            <span class="rioglyph rioglyph-truck">
+            </span>
+            <span class="rioglyph rioglyph-bus">
+            </span>
+            <span class="rioglyph rioglyph-van">
+            </span>
+            <span class="rioglyph rioglyph-car">
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Single rioglyph icon with custom styles</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph rioglyph-truck text-size-h2 text-color-gray">
+            </span>
+            <span class="rioglyph rioglyph-bus text-size-h2 text-color-gray">
+            </span>
+            <span class="rioglyph rioglyph-van text-size-h2 text-color-gray">
+            </span>
+            <span class="rioglyph rioglyph-car text-size-h2 text-color-gray">
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Single rioglyph icon with spinning animation</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph rioglyph-refresh text-size-h2 spinning">
+            </span>
+            <span class="rioglyph rioglyph-climate-control text-size-h2 spinning">
+            </span>
+            <span class="rioglyph rioglyph-cog text-size-h2 spinning">
+            </span>
+            <span class="rioglyph rioglyph-spinner text-size-h2 spinning">
+            </span>
+            <span class="rioglyph rioglyph-tire text-size-h2 spinning">
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Single rioglyph icon with pulsing animation</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph rioglyph-battery-level-empty text-size-h2 text-color-danger pulsing">
+            </span>
+            <span class="rioglyph rioglyph-battery-level-low text-size-h2 text-color-warning">
+            </span>
+            <span class="rioglyph rioglyph-battery-level-full text-size-h2 text-color-success">
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Paired rioglyph icon</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph-icon-pair text-size-h1">
+                <span class="rioglyph rioglyph-truck">
+                </span>
+                <span class="rioglyph rioglyph-fuel-hydrogen text-color-info">
+                </span>
+            </span>
+            <span class="rioglyph-icon-pair text-size-h1">
+                <span class="rioglyph rioglyph-bus">
+                </span>
+                <span class="rioglyph rioglyph-fuel-electric text-color-success">
+                </span>
+            </span>
+            <span class="rioglyph-icon-pair text-size-h1">
+                <span class="rioglyph rioglyph-van">
+                </span>
+                <span class="rioglyph rioglyph-fuel-diesel text-color-black">
+                </span>
+            </span>
+            <span class="rioglyph-icon-pair text-size-h1">
+                <span class="rioglyph rioglyph-car">
+                </span>
+                <span class="rioglyph rioglyph-fuel-gas text-color-black">
+                </span>
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Disabled styling</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph rioglyph-lock text-size-h2 rioglyph-disabled">
+            </span>
+            <span class="rioglyph rioglyph-key text-size-h2 rioglyph-disabled rioglyph-disabled-inverse">
+            </span>
+            <span class="rioglyph rioglyph-chat text-size-h2 rioglyph-disabled rioglyph-disabled-danger">
+            </span>
+        </div>
+    </div>
+    <div>
+        <label>Custom external svg icon</label>
+        <div class="display-flex gap-5 align-items-center">
+            <span class="rioglyph text-size-h1 text-color-info" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
+            </span>
+            <span class="rioglyph-icon-pair text-size-h1">
+                <span class="rioglyph" style="--i: url(https://cdn.rio.cloud/images/uikit/react_logo.svg);">
+                </span>
+                <span class="rioglyph text-color-danger" style="--i: url(https://cdn.rio.cloud/images/uikit/number_19.svg);">
+                </span>
+            </span>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| icon | string | — | The rioglyph icon string OR an external .svg link |
+| iconClassName | string | — | Additional classes set to the icon. |
+| size | string | — | The possible values are: h1, h2, h3, h4, h5, h6 as well as the following size values 10, 11, 12, 14, 16, 18, 20 |
+| spinning | boolean | — | Uses the spinning animation. |
+| pulsing | boolean | — | Uses the pulsing animation. |
+| pairIcon | string | — | The rioglyph icon string OR an external .svg link |
+| pairIconClassName | string | — | Additional classes set to the pairIcon. |
+| filled | boolean | — | Add a round background to the icon |
+| disabled | boolean | — | Add a disabled line |
+| disabledInverse | boolean | — | Flip the disabled line |
+| disabledDanger | boolean | — | Recolor the disabled line to the danger color |