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

Question

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

Vue 版本：2.6.10
Vue unicons 版本：3.3.1

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

自定义-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 这可能是由于编译而发生的，但答案对我没有帮助。

知道如何实现吗？

Answer 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

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

Vue unicons - set viewBox in custom icon

javascript

vue.js

vuejs2