Vue unicons - 在自定义图标中设置 viewBox答案

【问题标题】：Vue unicons - set viewBox in custom iconVue unicons - 在自定义图标中设置 viewBox
【发布时间】：2022-01-11 22:12:07
【问题描述】：

我刚刚在我的 vue 项目中安装了Vue Unicons 模块。

Vue 版本：2.6.10
Vue unicons 版本：3.3.1

我正在尝试创建自己的自定义图标as explained here：

custom-icons.js：

export const myTestIcon = {
    name: 'myTestIcon',
    style: 'line',
    viewBox: '0 0 680 680',
    path: '<path d="M 635 497 l 1 -466 l -620 0 L 20 640 L 516 643 L 231 221z"></path>';
}

app.js：

import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd';
import { myTestIcon } from './custom-icons';
Unicon.add([myTestIcon]);

App.vue：

<unicon name="my-test-icon"></unicon>

虽然我设置viewBox是图标定义，但图标是用默认值viewBox（0 0 24 24）渲染的。

如果我将viewBox="0 0 650 650" 甚至v-bind="{viewBox:'0 0 650 650'}" 添加到<unicon> 元素，它工作正常。但我不能这样做，因为我动态使用图标。

我读到in this place 可能是由于编译而发生的，但答案对我没有帮助。

知道如何实现吗？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

自定义图标定义架构不包含viewBox 属性，因此在您的定义中设置它无效。具体来说，Vue Unicons 仅来自自定义图标定义的reads name, style, and path。

viewBox 只能设置为prop on the <unicon> component：

<unicon name="my-custom-icon"
        viewBox="0 0 32 32" ?
        width="64"
        height="64" />

demo

【讨论】：