具有多路径的 SVG
SVG with multiple path
如何在 svg 中使用不同的填充变量?
我正在这样尝试,但没有得到任何结果:
<img class="icon-shop icon-colors" src="@/assets/icon-shop.svg"/>
...
<style>
.icon-colors {
--color-default: #c13127;
--color-dark: #ef5b49;
}
</style>
图标-shop.svg
<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>
有关如何使此代码起作用的更新
<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>
这将为整个 VS 使用经典 .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>
如何在 svg 中使用不同的填充变量?
我正在这样尝试,但没有得到任何结果:
<img class="icon-shop icon-colors" src="@/assets/icon-shop.svg"/>
...
<style>
.icon-colors {
--color-default: #c13127;
--color-dark: #ef5b49;
}
</style>
图标-shop.svg
<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>
有关如何使此代码起作用的更新
<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>
这将为整个 VS 使用经典 .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>