小企业广告投放平台_建设厅电工证_网络推广引流最快方法_百度广告推广费用

svg/icon-svg-symbol.vue

<template><svgclass="icon-svg-symbol":class="className":style="{ color: props.color }":width="width":height="height"><use :xlink:href="symbolId" :width="width" :height="height"></use></svg>
</template><script setup lang="ts">import { computed } from 'vue';const props = withDefaults(defineProps<{name: string;color?: string;size?: string;width?: string | 0;height?: string | 0;}>(),{color: 'currentColor',size: '24px',width: 0,height: 0,},);const symbolId = computed(() => `#${props.name}`);const className = computed(() => `icon-${props.name}`);const width = computed(() => props.width || props.size);const height = computed(() => props.height || props.size);
</script>

svg/index.vue

<template><svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="add" viewBox="0 0 29 29" fill="none"><pathfill-rule="evenodd"clip-rule="evenodd"d="M15.117 6.225h-1.779v7.113H6.225v1.779h7.113v7.113h1.779v-7.113h7.113v-1.779h-7.113V6.225z"fill="currentColor"fill-opacity=".8"/></symbol><symbol id="add-upload" viewBox="0 0 36 36" fill="none"><g opacity="1"><path d="M6.75 18H29.25" stroke="currentColor" stroke-width="1.25" /><path d="M6.75 18H29.25" stroke="currentColor" stroke-width="1.25" /><path d="M18 29.25L18 6.75" stroke="currentColor" stroke-width="1.25" /></g></symbol></svg>
</template>
<script setup lang="ts"></script>

实际使用

import IconSvgSymbol from '~/components/svg/icon-svg-symbol.vue';<IconSvgSymbolname="add-upload"size="16"></IconSvgSymbol>