src/pages/index.astro

---
import { Icon } from "astro-icon/components";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Default behaviour</h1>
    <p>Using the <code>Icon</code> component without specifying any size. Note it gets a default height of <code>1em</code> and, in this case, a width of <code>1em</code>. I think this is probably a sensible default for most usecases.</p>
    <Icon name="test" />

    <h1>Desired option</h1>
    <p>This is a hardcoded example of what I would like to be able to achieve- the SVG is embedded directly here rather than using the <code>Icon</code> component. Note that with no width/height specified it will grow to fill the available space.</p>
    <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
      <circle fill="currentColor" cx="250" cy="250" r="250"/>
    </svg>

    <h1>Specifying auto</h1>
    <p>Here I'm using the <code>Icon</code> component, but specifying both the <code>size</code> prop as <code>auto</code>. I think this is probably the easiest solution to my specific use case as it already works aside from a trivial type issue.</p>
    <Icon name="test" size="auto" />
    <p>Note though that there is potential for a bit of a footgun in this case. If passing only one of <code>width</code>/<code>height</code>, then the other will still get the default value generated by iconify. I'm not convinced that's a major issue though, as it would already happen if passing in just a single numeric value. Note we pass <code>height={"{30}"}</code> here, but the width is still set to <code>1em</code>.</p>
    <Icon name="test" height={30} />
    <p>If a solution is wanted for that, then my suggestion would be to pass <code>height: unset</code> to iconify automatically if any sizing prop is passed to the <code>Icon</code> component.</p>
    <p>This is also slightly different from how iconify interprets <code>auto</code>. They use <code>auto</code> to automatically set the dimension based on the viewport. I think that difference is probably acceptable to stay more HTML-like.</p>

    <h1>Potential alternative</h1>
    <p>Whilst the previous solution would solve my current use case, it might also be desirable to allow control of the full icon customisations. That would allow for also using <code>hFlip</code>, <code>vFlip</code>, and <code>rotate</code> (<a href="https://iconify.design/docs/libraries/utils/icon-customisations.html#transformations">see here</a>). I suppose they could also be exposed as separate props on the <code>Icon</code> component too.</p>
  </body>
</html>

<style>
  h1:not(:first-child) {
    margin-top: 80px;
  }

  p {
    max-width: 80ch;
    font-size: 1.1rem;
    line-height: 1.4;
  }

  code {
    background: #ddd;
    padding: 2px;
    border-radius: 2px;
    white-space: nowrap;
  }
</style>