Icon Component
   A component for rendering SVG icons with customizable size and color.
   
   Required Parameters:
   - name: string - Name of the SVG icon file without extension
   - svg: string - Raw SVG content to be rendered
   
   Size Parameters (choose one):
   - size: string - Custom size with unit (e.g., '12px', '1.5rem', '2em') (optional)
   - preset_size: string - Predefined size (sm, md, lg, xl, 2xl, 3xl) (optional)
   
   Color Parameters (choose one):
   - color: string - Custom color value (hex, rgb, or valid CSS color) (optional)
   - preset_color: string - Bootstrap color (primary, secondary, success, danger, warning, info, light, dark) (optional)
   
   Optional Parameters:
   - title: string - Title attribute for accessibility (recommended for a11y) (optional)
   - id: string - Custom ID for the icon wrapper (optional)
   - attributes: object - Additional HTML attributes for the wrapper (optional)
   
   Notes:
   - SVG dimensions are automatically adjusted based on the size parameter
   - All numeric width/height attributes are removed to allow dynamic sizing
   - Bootstrap theme colors are applied using CSS variables
   - Default size is inherited from font-size if no size is specified
   - Icons scale proportionally based on the font-size
   - For icon sizes outside the range (8px-64px), preprocess the SVG in your application to remove width/height attributes

    ThemedComponent::make("icons/icon")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->color('value') //string - Custom color value (hex, rgb, or valid CSS color) (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->name('value') //string - Name of the SVG icon file without extension
	->preset_color('value') //string - Bootstrap color (primary, secondary, success, danger, warning, info, light, dark) (optional)
	->preset_size('value') //string - Predefined size (sm, md, lg, xl, 2xl, 3xl) (optional)
	->size('value') //string - Custom size with unit (e.g., '12px', '1.5rem', '2em') (optional)
	->title('value') //string - Title attribute for accessibility (recommended for a11y) (optional)
	->render();

// Example usage of pre-defined icon sizes & colors in icon.css
$output = "";
$presetColors = [
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "info",
    "dark"
];

$customSizes = [
    "xs" => "0.75rem",
    "sm" => "0.875rem",
    "lg" => "1.25rem",
    "xl" => "1.5rem",
    "2xl" => "2rem",
    "3xl" => "3rem"
];

$i = 0;
foreach ($customSizes as $size => $description) {
    $color = $presetColors[$i % count($presetColors)];
    $output .= ThemedComponent::make("icons/icon")
        ->name("star-fill")
        ->preset_size($size)
        ->preset_color($color)
        ->title("Size: {$description} - ({$color})")
        ->render();
    $i++;
}
    
$echo $output

// Generating a list of random icons
//Get a bunch of random icon files
$icons = glob( "/path_to_template/icons/*.svg");

// Get 100 random icons
$iconList = array_rand($icons, 500);

$output = "";
foreach ($iconList as $icon) {
    $color = randomColor();
    $name = basename($icons[$icon], '.svg');
    $size = rand(20, 40);
    $title = $name . ".svg ({$size}px) - {$color}";

    $output .= ThemedComponent::make('icons/icon')
            ->name($name)
            ->size($size.'px')
            ->title($title)
            ->color($color)
            ->render();
}
echo $output;

Content of the icon.css file

.themed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

.themed-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Icon sizes */
.themed-icon-xs {
    font-size: 0.75rem;
}

.themed-icon-sm {
    font-size: 0.875rem;
}

.themed-icon-lg {
    font-size: 1.25rem;
}

.themed-icon-xl {
    font-size: 1.5rem;
}

.themed-icon-2xl {
    font-size: 2rem;
}

.themed-icon-3xl {
    font-size: 3rem;
}

/* Icon colors - using Bootstrap's theme colors */
.themed-icon-primary { color: var(--bs-primary); }
.themed-icon-secondary { color: var(--bs-secondary); }
.themed-icon-success { color: var(--bs-success); }
.themed-icon-danger { color: var(--bs-danger); }
.themed-icon-warning { color: var(--bs-warning); }
.themed-icon-info { color: var(--bs-info); }
.themed-icon-light { color: var(--bs-light); }
.themed-icon-dark { color: var(--bs-dark); }

Content of the icon.twig file

{# Icon Component
   A component for rendering SVG icons with customizable size and color.
   
   Required Parameters:
   - name: string - Name of the SVG icon file without extension
   - svg: string - Raw SVG content to be rendered
   
   Size Parameters (choose one):
   - size: string - Custom size with unit (e.g., '12px', '1.5rem', '2em') (optional)
   - preset_size: string - Predefined size (sm, md, lg, xl, 2xl, 3xl) (optional)
   
   Color Parameters (choose one):
   - color: string - Custom color value (hex, rgb, or valid CSS color) (optional)
   - preset_color: string - Bootstrap color (primary, secondary, success, danger, warning, info, light, dark) (optional)
   
   Optional Parameters:
   - title: string - Title attribute for accessibility (recommended for a11y) (optional)
   - id: string - Custom ID for the icon wrapper (optional)
   - attributes: object - Additional HTML attributes for the wrapper (optional)
   
   Notes:
   - SVG dimensions are automatically adjusted based on the size parameter
   - All numeric width/height attributes are removed to allow dynamic sizing
   - Bootstrap theme colors are applied using CSS variables
   - Default size is inherited from font-size if no size is specified
   - Icons scale proportionally based on the font-size
   - For icon sizes outside the range (8px-64px), preprocess the SVG in your application to remove width/height attributes
#}

{% if content.name %}
{% set size_value = content.size|replace({'px': '', 'rem': '', 'em': ''}) %}
<span 
    {% if id %}id="{{ id }}"{% endif %}
    class="themed-icon{% if not content.size and content.preset_size %} themed-icon-{{ content.preset_size }}{% endif %}{% if not content.color and content.preset_color %} themed-icon-{{ content.preset_color }}{% endif %}{% if content.class %} {{ content.class }}{% endif %}"
    {% if content.title %}title="{{ content.title }}"{% endif %}
    {% if content.size or content.color %}style="{% if content.size %}font-size:{{ content.size }}; {% endif %} {% if content.color %}{% if content.color starts with 'primary' or content.color starts with 'secondary' or content.color starts with 'success' or content.color starts with 'danger' or content.color starts with 'warning' or content.color starts with 'info' or content.color starts with 'light' or content.color starts with 'dark' %}color: var(--bs-{{ content.color }});{% else %}color: {{ content.color }};{% endif %}{% endif %}"{% endif %}
    {% if attributes %}{{ attributes|raw }}{% endif %}
>
    
    {% set svg = content.svg ? content.svg|regex_replace('/width[ \t]*=[ \t]*"[^"]*"/i', 'width=""')|regex_replace('/height[ \t]*=[ \t]*"[^"]*"/i', 'height=""') : '' %}

    {# Optional: Display an error or placeholder if svg is empty #}
    {% if not svg %}
        <span class="error" title="Icon not found for {{ content.name }}">[-]</span>
    {% else %}
        {{ svg|raw }}
    {% endif %}

</span>
{% endif %}