Support icons as components from svelte-material-icons

[brunomorency]

The library supports adding icons to some components as raw SVG string passed on the data prop. It would be great to support libraries such as svelte-material-icons and svelte-bootstrap-icons.

Current

<script>
  import AlertCircle from "svelte-material-icons/AlertCircle.svelte";
  const AlertCircleSVG = AlertCircle.render().html;
</script>

<Alert type="error" class="w-full">
  <Alert.Leading slot="leading" data={AlertCircleSVG} />
  <Alert.Title slot="title">The email and password fields are required</Alert.Title>
</Alert>

Proposed

STWUI sees the data is a component that can be rendered as SVG and renders it

<script>
  import AlertCircle from "svelte-material-icons/AlertCircle.svelte";
</script>

<Alert type="error" class="w-full">
  <Alert.Leading slot="leading" data={AlertCircle} />
  <Alert.Title slot="title">The email and password fields are required</Alert.Title>
</Alert>

Alternative Proposal

Use the icon component nested into STWUI component (probably cleaner)

<script>
  import AlertCircle from "svelte-material-icons/AlertCircle.svelte";
</script>

<Alert type="error" class="w-full">
  <Alert.Leading slot="leading"><AlertCircle /></Alert.Leading>
  <Alert.Title slot="title">The email and password fields are required</Alert.Title>
</Alert>

[N00nDay]

I believe your proposed plan is not possible in Svelte as you can't pass a component as a prop.

The alternative is possible now but you as the developer are responsible for the styling of that component as the library cannot control it. The reason for the data prop is that I can inject that into the library's pre-styled component to ensure it matches/updates for any scenario or prop that is thrown at it.

For your alternative proposal, you would actually do it like this:

<script>
  import AlertCircle from "svelte-material-icons/AlertCircle.svelte";
</script>

<Alert type="error" class="w-full">
  <AlertCircle slot="leading" class="YOUR STYLING HERE" />
  <Alert.Title slot="title">The email and password fields are required</Alert.Title>
</Alert>

[brunomorency]

That proposal works really well, thanks for the suggestion. Just started using your library, awesome work! I really like it so far!