Icon

---
import {
  Button,
  Icon,
  Input,
  InputGroup
} from '@santi020k/lumen-astro'
---

<InputGroup>
  <Icon name="search" decorative />
  <Input aria-label="Search docs" placeholder="Search docs" />
</InputGroup>

<Button variant="secondary">
  <Icon name="wand-sparkles" decorative />
  Generate
</Button>

<Icon name="circle-check" label="Synced" size="lg" />

import { Button, Icon, Input, InputGroup } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <InputGroup>
      <Icon name="search" decorative />
      <Input aria-label="Search docs" placeholder="Search docs" />
    </InputGroup>

    <Button variant="secondary">
      <Icon name="wand-sparkles" decorative />
      Generate
    </Button>

    <Icon name="circle-check" label="Synced" size="lg" />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-input-group>
  <lumen-icon name="search" decorative></lumen-icon>
  <lumen-input aria-label="Search docs" placeholder="Search docs"></lumen-input>
</lumen-input-group>

<lumen-button variant="secondary">
  <lumen-icon name="wand-sparkles" decorative></lumen-icon>
  Generate
</lumen-button>

<lumen-icon name="circle-check" label="Synced" size="lg"></lumen-icon>