pinafore/src/routes/_components/SvgIcon.html

<svg
  class={className}
  {style}
  aria-hidden={!ariaLabel}
  aria-label={ariaLabel}
  ref:svg>
  <use xlink:href="{inline ? '' : '/icons.svg'}{href}" />
</svg>
<script>
  import { animate } from '../_utils/animate'
  import { store } from '../_store/store'

  export default {
    data: () => ({
      className: '',
      style: '',
      ariaLabel: ''
    }),
    store: () => store,
    computed: {
      inline: ({ href }) => process.env.INLINE_SVGS.includes(href)
    },
    methods: {
      animate (animation) {
        const { reduceMotion } = this.store.get()
        if (animation && !reduceMotion) {
          animate(this.refs.svg, animation)
        }
      }
    }
  }
</script>