Icons
The agnostic-astro package utilizes utilizes XElement. Here's an agnostic-astro TBD:
Usage
AgnosticUI requires the import of the common.min.css
from your Astro base layout:
import 'agnostic-css/public/css-dist/common.min.css';
Then you can import Astro Icons component:
import AgIcon from 'agnostic-astro/Icon.astro';
AgnosticUI Icon component is a thin wrapper around SVG icons and is meant to work with most reputable SVG icon
systems. Note you will need to ensure the SVG icons being used have had their width
and height
attributes removed so that
they can dynamically have their width
set based on CSS classes applied. Further, the SVG icons themselves must either use fill=currentColor or not supply
a fill presentational attribute so that they utilize the font color defined in CSS. Same for strokes.
<!-- Using an SVG -->
<AgIcon type="success" size="40">
<IconOctiHouse />
</AgIcon>
<!-- Using an SVG sprite symbol -->
<AgIcon type="success" size="32">
<svg class="icon-star">
<use xlink:href="#star"></use>
</svg>
</AgIcon>
Available Sizes: 14, 16, 18, 20, 24, 32, 36, 40, 48, 56, 64