52ae0c5802
Some checks failed
cache-seeder / prune (push) Has been skipped
cache-seeder / frontend (push) Failing after 3s
cache-seeder / python (push) Failing after 3s
cache-seeder / gobuild (push) Failing after 4s
cache-seeder / lint (bindata, lint-backend) (push) Failing after 3s
giteabot backport / giteabot (push) Has been skipped
giteabot / giteabot (push) Has been skipped
cache-prune / prune (push) Has been skipped
release-nightly-snapcraft / build-and-publish (ubuntu-24.04) (push) Has been cancelled
release-nightly-snapcraft / build-and-publish (ubuntu-24.04-arm) (push) Has been cancelled
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
cron-renovate / cron-renovate (push) Has been skipped
38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import {computed} from 'vue';
|
|
import {svgParseOuterInner, type SvgName} from '../svg.ts';
|
|
import {html, htmlRaw} from '../utils/html.ts';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
name: SvgName,
|
|
size?: number,
|
|
symbolId?: string,
|
|
}>(), {
|
|
size: 16,
|
|
symbolId: undefined,
|
|
});
|
|
|
|
const icon = computed(() => {
|
|
let {svgOuter, svgInnerHtml} = svgParseOuterInner(props.name);
|
|
const attrs: Record<string, string | number> = {};
|
|
for (const attr of svgOuter.attributes) {
|
|
if (attr.name === 'class') continue;
|
|
attrs[attr.name] = attr.value;
|
|
}
|
|
attrs.width = props.size;
|
|
attrs.height = props.size;
|
|
|
|
const classes = Array.from(svgOuter.classList);
|
|
if (props.symbolId) {
|
|
classes.push('tw-hidden', 'svg-symbol-container');
|
|
svgInnerHtml = html`<symbol id="${props.symbolId}" viewBox="${attrs.viewBox}">${htmlRaw(svgInnerHtml)}</symbol>`;
|
|
}
|
|
attrs.innerHTML = svgInnerHtml; // the icons are bundled, they carry no user input
|
|
return {attrs, classes};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<svg v-bind="icon.attrs" :class="icon.classes"/>
|
|
</template>
|