Using external src file

[matthacksteiner]

It would be great to use an external file, let's say from a JSON file.

<Icon name="external" src="https://...">

[stramel]

Thanks for the suggestion! As of now, I don't believe this is in our roadmap. We're moving closer to build time and away from runtime fetching.

Can you provide some more details as to how you would expect this package to handle the external file/url?

[matthacksteiner]

Hi! Sorry for the late reply. In my case, I would use the package to inline SVG images that are uploaded via a CMS from the client. The CMS provided as JSON file with the URL to the file.

---
import { Icon } from 'astro-icon';

const response = await fetch('https://***');
const data = await response.json();
---

<Icon type="external" src={data.image} />

[stramel]

@matthacksteiner Sorry for taking a long time to reply. I can investigate a bit into this but if you're just looking to inline an SVG file, you could use set:html

---
const response = await fetch('https://example.com/path/to/file.svg')
const iconData = await response.text()
---
<div set:html={iconData}  style={{height: '24px', width: '24px' }} />

[matthacksteiner]

@stramel No worries - thanks for the workaround!

[stramel]

I'm going to close this as this doesn't seem to fit our goals at this time. I think the workaround should suffice to build a custom astro component that would achieve this goal.