kitten-icons/test/index.page.js

A subset of the Phosphor icon set in Kitten component format.

import { icons } from '../icons.mjs'

/**
  A Chesire cat (fades in and out). Demonstrates
  composition/component extension to create
  a different, reusable icon component.
*/
const CheshireCat = ({duration = 3, minOpacity = 0, maxOpacity = 1, ...props}) => {
  return kitten.html`
    <${icons.Cat} ...${props}>
      <animate
        attributeName="opacity"
        values="${minOpacity};${maxOpacity};${minOpacity}"
        dur="${duration}s"
        repeatCount="indefinite"
      />
    </>
  `
}

export default function () {
  return kitten.html`
    <${CheshireCat}
      size=40%
      weight=duotone
      colour=deeppink
    />
  `
}