Nolan Lawson
880bc7a38a
* perf: use a separate icons.svg file This splits icons into inline and non-inline. The inline ones are high priority; the rest go in an icons.svg file. * create SvgIcon.html * determine inlined svgs at build time
37 lines
790 B
HTML
37 lines
790 B
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 }) => {
|
|
// filled in during build
|
|
return process.env.INLINE_SVGS.includes(href)
|
|
}
|
|
},
|
|
methods: {
|
|
animate (animation) {
|
|
let { reduceMotion } = this.store.get()
|
|
if (!animation || reduceMotion) {
|
|
return
|
|
}
|
|
let svg = this.refs.svg
|
|
animate(svg, animation)
|
|
}
|
|
}
|
|
}
|
|
</script>
|