Icons
Reusable SVG icon components (Tabler Icons and Devicons) with interactive card grid
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
The command below includes <strong>Icons</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
pnpm dlx rizzo-css add Icons
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Gear from '../components/icons/Gear.astro';
import Css3 from '../components/icons/devicons/Css3.astro';
---
<p>Theme-aware (currentColor): <Gear width={24} height={24} /></p>
<p>Devicon: <Css3 width={24} height={24} /></p>
<!-- Rizzo CSS. Inline SVG or use .icon class; currentColor for theme. -->
<span class="icon" aria-hidden="true"><!-- svg --></span>
<script>
import { Gear } from '$lib/rizzo/icons';
import Css3 from '$lib/rizzo/icons/devicons/Css3.svelte';
</script>
<p>Theme-aware: <Gear width={24} height={24} /></p>
<p>Devicon: <Css3 width={24} height={24} /></p>
<script setup>
import Icons from '@/components/rizzo/Icons.vue';
</script>
<template>
<Icons />
</template>
import { Icons } from './components/react';
<Icons />
Other frameworks: Astro · Vanilla · Svelte · React