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

Posted 2023-02-16

【中文标题】Vue unicons - 在自定义图标中设置 viewBox

【英文标题】：Vue unicons - set viewBox in custom icon

【发布时间】：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 可能是由于编译而发生的，但答案对我没有帮助。

知道如何实现吗？

【参考方案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" ?
        
         />

demo