svgdeitor导入svg文件

导入拿到的文件内容

"<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg t=\"1722306319804\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"59671\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"128\" height=\"128\"><path d=\"M907.636364 46.545455H116.363636C51.2 46.545455 0 97.745455 0 162.909091v628.363636c0 65.163636 51.2 116.363636 116.363636 116.363637h23.272728v46.545454c0 13.963636 9.309091 23.272727 23.272727 23.272727h93.090909c13.963636 0 23.272727-9.309091 23.272727-23.272727v-46.545454h465.454546v46.545454c0 13.963636 9.309091 23.272727 23.272727 23.272727h93.090909c13.963636 0 23.272727-9.309091 23.272727-23.272727v-46.545454h23.272728c65.163636 0 116.363636-51.2 116.363636-116.363637V162.909091c0-65.163636-51.2-116.363636-116.363636-116.363636zM116.363636 93.090909h791.272728c39.563636 0 69.818182 30.254545 69.818181 69.818182v69.818182H46.545455V162.909091c0-39.563636 30.254545-69.818182 69.818181-69.818182z m116.363637 837.818182H186.181818v-23.272727h46.545455v23.272727z m605.090909 0h-46.545455v-23.272727h46.545455v23.272727z m69.818182-69.818182H116.363636c-39.563636 0-69.818182-30.254545-69.818181-69.818182V279.272727h930.90909v512c0 37.236364-30.254545 69.818182-69.818181 69.818182z\" p-id=\"59672\"></path><path d=\"M674.909091 628.363636c-13.963636 0-23.272727 9.309091-23.272727 23.272728v93.090909c0 13.963636 9.309091 23.272727 23.272727 23.272727s23.272727-9.309091 23.272727-23.272727v-93.090909c0-13.963636-9.309091-23.272727-23.272727-23.272728zM768 628.363636c-13.963636 0-23.272727 9.309091-23.272727 23.272728v93.090909c0 13.963636 9.309091 23.272727 23.272727 23.272727s23.272727-9.309091 23.272727-23.272727v-93.090909c0-13.963636-9.309091-23.272727-23.272727-23.272728zM861.090909 628.363636c-13.963636 0-23.272727 9.309091-23.272727 23.272728v93.090909c0 13.963636 9.309091 23.272727 23.272727 23.272727s23.272727-9.309091 23.272727-23.272727v-93.090909c0-13.963636-9.309091-23.272727-23.272727-23.272728zM162.909091 186.181818h46.545454c13.963636 0 23.272727-9.309091 23.272728-23.272727s-9.309091-23.272727-23.272728-23.272727H162.909091c-13.963636 0-23.272727 9.309091-23.272727 23.272727s9.309091 23.272727 23.272727 23.272727zM302.545455 186.181818h46.545454c13.963636 0 23.272727-9.309091 23.272727-23.272727s-9.309091-23.272727-23.272727-23.272727h-46.545454c-13.963636 0-23.272727 9.309091-23.272728 23.272727s9.309091 23.272727 23.272728 23.272727z\" p-id=\"59673\"></path></svg>"

单纯显示可以直接v-html该文本直接显示，设置颜色，先移除path里fill属性再添加style=“fill:#06738e”

function removeFillFromSinglePath(svgString) {
    // 首先检查字符串中 path 标签的数量
    const pathCount = (svgString.match(/<path/g) || []).length;

    if (pathCount === 1) {
      // 如果只有一个 path 标签，则移除 fill 属性
      return svgString.replace(/( fill="[a-zA-Z0-9#%:., -]*")/g, '');
    } else {
      // 如果没有或有多个 path 标签，则不作修改
      return svgString;
    }
  }
  const content = computed(() => {
    return removeFillFromSinglePath(props.content).replace(/<svg/g, '<svg style="fill:#06738e"');
  });

结合svgdeitor插件操作svg图片，(vue3+ts)

<!-- eslint-disable vue/no-v-html -->
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<template>
  <g :id="props.id">
    <symbol
      viewBox="0 0 1024 1024"
      :id="`${props.id}switch-demo-open`"
      v-html="iconImage"
      :style="`fill:${props.svgColor}`"
    >
    </symbol>
    <use :xlink:href="`#${props.id}switch-demo-open`" width="100" height="100"></use>
  </g>
</template>

 对拿到的svg文本进行操作获取只有<path>标签的内容

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  const props = defineProps({
    id: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    svgColor: {
      type: String,
      default: '#000'
    }
  });
  const regex = ref(/<path[^>]*>[\s\S]*<\/path>/);
  const iconImage = ref('');
  function removeFillFromSinglePath(svgString) {
    // 首先检查字符串中 path 标签的数量
    const pathCount = (svgString.match(/<path/g) || []).length;

    if (pathCount === 1) {
      // 如果只有一个 path 标签，则移除 fill 属性
      return svgString.replace(/( fill="[a-zA-Z0-9#%:., -]*")/g, '');
    } else {
      // 如果没有或有多个 path 标签，则不作修改
      return svgString;
    }
  }
  onMounted(() => {
    const htmlStr = props.content.match(regex.value) || [];
    const svgStr = htmlStr[0];
    iconImage.value = removeFillFromSinglePath(svgStr) as string;
  });
</script>