首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我如何使用我的svg图标与q-btn-切换

我如何使用我的svg图标与q-btn-切换
EN

Stack Overflow用户
提问于 2022-06-15 15:22:18
回答 1查看 553关注 0票数 0

我在我的项目中使用类星体,我想使用我的svg图标与q切换,上面写着,它已经足够给出直接的路径,但我的svg图标没有出现。下面是我的代码示例。

代码语言:javascript
运行
复制
template(lang="pug")
          q-btn-toggle.my-custom-toggle(v-model="secondModel" color="white" text-color="primary" :options="toggleOption" size="sm")

数据

代码语言:javascript
运行
复制
      toggleOption: [
    { label: 'Table', value: 'table', slot: 'one', icon: require('@/assets/svg/toggle/Table.svg') },
    { label: 'Calendar', value: 'calendar', slot: 'two', icon: '@/assets/svg/toggle/Table.svg' }
  ],
  secondModel: 'table'
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-16 01:26:45

文档说明了有关指定自定义图标的如下内容:

icon : String 描述 选项按钮的图标;使用此道具和/或“标签”,但至少需要一个 示例

  • map
  • ion-add
  • img:https://cdn.quasar.dev/logo-v2/svg/logo.svg
  • img:path/to/some_image.png

指向图标图像的路径必须加上img:。此外,类星体文档还讨论了在assets 这里中引用文件,并指出:

类星体提供了assets别名,因此建议您像这样使用它:<img src="~assets/logo.png">。注意“资产”前面的~

将所有这些放在一起,您的选项定义可能应该如下所示:

代码语言:javascript
运行
复制
[
  {
    label: 'Calendar',
    value: 'calendar',
    slot: 'two',
    icon: 'img:~assets/svg/toggle/Table.svg'
  },
  . . .
]

下面是一个工作示例,它显示了一个自定义图标,该图标引用了URL:https://codepen.io/euphemism/pen/PoQLqRe?editors=101上的图像

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72633968

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档