多路径SVG

Question

如何处理svg中的不同填充变量？

我试着这样做，但我没有得到任何结果：

<img class="icon-shop icon-colors" src="@/assets/icon-shop.svg"/>
...
<style>
.icon-colors {
  --color-default: #c13127;
  --color-dark: #ef5b49;
}
</style>

图标-icon.icon

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..." fill="var(--color-default)"/><path d="..." fill="var(--color-dark)"/><path d="..." fill="var(--color-default)"/><g><path d="..." fill="var(--color-default)"/></g></svg>

编辑1：

当我尝试使用svg作为.vue文件时，我得到一个空白页，控制台错误：

Failed to execute 'createElement' on 'Document': The tag name provided ('/img/icon-shop.7de319ba.svg') is not a valid name.

编辑2:我不知道该如何导出变量组件

<template>
  <svg
    v-if="name === 'shop'"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
      fill="var(--color-default)"
    />

  </svg>
</template>

<script>
export default {
  props: ["name", "var(--color-default)", "var(--color-black)"],
};
</script>

组件调用

<IconShopVue
      color-default="#c0ffee"
      color-dark="#c0ffee"
      class="w-8 h-8"
      name="shop"
    ></IconShopVue>

Answer 1

有关如何使此代码正常运行的更新

<template>
  <svg
    v-if="name === 'shop'"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      d="M15.6 1.6H8.4c-.4 0-.7.3-.7.7v2.5h8.5V2.3c.1-.4-.2-.7-.6-.7z"
      :fill="colorDefault"
    />

  </svg>
</template>

<script>
export default {
  props: ["name", "colorDefault", "colorBlack"],
};
</script>

<IconShopVue
  color-default="#c0ffee"
  color-dark="#c0ffee"
  class="w-8 h-8"
  name="shop"
></IconShopVue>

您应该将svg放入.vue文件，将SVG代码复制到template部分。然后，将一些道具传递给您的.vue组件，并像使用任何其他类型的道具一样，插入实际的default/dark颜色。

<my-cool-svg header-color="#c13127" outline-color="#ef5b49" fill-color="#c0ffee"></my-cool-svg>

这将提供很大的灵活性，总体上与使用一个经典的.svg文件相比。

这就是.vue应该看起来的样子

<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="..." :fill="headerColor"/>
    <path d="..." :fill="outlineColor"/>
    <path d="..." :fill="fillColor"/>
    <g>
      <path d="..." :fill="fillColor"/>
    </g>
  </svg>

</template>

<script>
export default {
  props: ['headerColor', 'outlineColor', 'fillColor']
}
</script>