svg灵活使用

以下小细节都是运用在vue3+typescript项目下：

  1. public-icons.svg 公共icon-svg

        在public-icons.svg，中装了若干个icon-svg。

        1.1  删除默认填充色fill。首先 从设计稿（以figma设计举例）导出的svg文件，先要把每个 icon-svg文件path 里 fill="#333" 的对应默认填充色去掉，一般会在path的末尾  <path 具体内容  fill="#333" />变成  <path  具体内容  />

        1.2 有的svg设计上用的是 stroke进行填充的默认色，例如下方 icon_Copy_Two，则要把 

stroke="#333"  去掉。

        1.3 svg内绘制的内容还可以通过 transform="translate(10 24)"  或 transform="matrix(1 0 0 -1 0 28)" 方式 缩放或移动内容的在xy轴上的位置

         1.4 有的简单内容，例如缺个圆底色，可以手动通过自己加个圆底色背景， <circle cx="6" cy="14" r="2" fill="white"/>  方式加， r是圆的半径宽度。

        1.5 复杂的svg有多个path内容，当不想要部分path，即这个位置内容需要动态数据展示的，可以通过挨个注释path的方式找到对应某个path去注释掉

        1.6 添加了新的svg内容，页面需要在新的页面重新打开用以加载新的svg

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>

<symbol id="icon_Down_Two" viewBox="0 0 24 24">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.79289 8.29289C6.18342 7.90237 6.81658 7.90237 7.20711 8.29289L12.5 13.5858L17.7929 8.29289C18.1834 7.90237 18.8166 7.90237 19.2071 8.29289C19.5976 8.68342 19.5976 9.31658 19.2071 9.70711L13.2071 15.7071C12.8166 16.0976 12.1834 16.0976 11.7929 15.7071L5.79289 9.70711C5.40237 9.31658 5.40237 8.68342 5.79289 8.29289Z" />
</symbol>

<symbol id="icon_Copy_Two" viewBox="0 0 60 60">
<rect  x="15.5" y="18.5" width="17.6452" height="14.68" rx="2.5"  stroke-width="3"/>
<rect  x="26.8555" y="26.8203" width="17.6452" height="14.68" rx="2.5" stroke-width="3"/>
</symbol>

<symbol id="icon_Cashback_Two" viewBox="0 0 28 28" transform="matrix(1 0 0 -1 0 28)">
<path d="M2 27H24V29H2V27ZM18 12L13 2L8 12L0 5L2 24H24L27 5L18 12Z" />
</symbol>

<symbol id="icon_Card_Two" viewBox="0 0 32 32">
<path transform="translate(0 2)" d="M28.5008 8.9332V7.9871H28.4981V5.31015C28.367 4.01953 27.318 3.01054 26.0204 2.95859H3.14786C1.71644 2.95859 0.555466 4.1289 0.552734 5.57265V8.9332H28.5008ZM28.5008 16.8027V10.2102H0.552734V22.6926C0.702978 23.8574 1.61264 24.7816 2.75995 24.943H26.463C27.4928 24.7351 28.3014 23.9148 28.5008 22.873V16.8027ZM9.062 21.2926H3.2981V19.6848H9.062V21.2926Z"/>
</symbol>


</defs>
</svg>

2. public-svg.vue公共svg组件，在组件里引入上方 public-icons.svg 集成文件

<template>
  <svg @click="(e) => emit('click', e)">
    <use :xlink:href="svg + '#' + icon"></use>
  </svg>
</template>

<script setup lang="ts">
import svg from '@/assets/public-icons.svg';
import { defineProps, defineEmits } from 'vue';
defineProps<{
  icon: string;
}>();
const emit = defineEmits(['click']);
</script>

3. 具体使用

<template>
<public-svg class="down-two-icon"  icon="icon_Down_Two"/>
<public-svg class="copy-btn" icon="icon_Copy_Two"/>
</template>

<script setup lang="ts">
import PublicSvg from '@/components/public-svg.vue';
</script>

<style scoped>
 .down-two-icon {
    width: 24px;
    height: 24px;
    fill: #dfdfdf;
 }
 .copy-btn{
     width: 60px;
     height: 60px;
     fill: transparent;
     stroke: #98a7b5;
}
</style>