The agnostic-astro package utilizes utilizes XElement. Here's an agnostic-astro TBD:

Ensure you've installed and setup the AgnosticUI Astro integration which will import the required common.min.css onto your page:

npm i astro-agnosticui

Then add the integration to your astro.config.mjs (you may need to run Astro with experimental integrations flag astro dev --experimental-integrations):

import { defineConfig } from 'astro/config';
import agnosticAstro from 'astro-agnosticui';;
export default defineConfig({
  integrations: [agnosticAstro()]
});

Then you can import Astro Icons component (agnostic-astro ships with the astro-agnosticui integration):

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>