Basketball
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>
      
Using an SVG Sprite (aka symbol and use xlink:href pattern.
Available Sizes: 14, 16, 18, 20, 24, 32, 36, 40, 48, 56, 64