Vuetify 3:使用 Svg 作为 v 图标
P粉440453689
P粉440453689 2023-08-28 21:34:41
[Vue.js讨论组]
<p>我想使用我的自定义 svg 作为 v 图标,但我在 Vuetify v3 文档中没有找到任何解决方案。</p> <p>在 vuetify v2 中,我可以在 vuetify.js 中执行此类操作:</p> <pre class="brush:php;toolbar:false;">export default new Vuetify({ icons:{ values: { test: { component: Test, },</pre> <p>我可以这样使用它:</p> <pre class="brush:php;toolbar:false;">&lt;v-icon size=&quot;40&quot;&gt;$vuetify.icons.test&lt;/v-icon&gt;</pre> <p>我如何在 Vuetify v3 中做同样的事情?感谢您的帮助:)</p>
P粉440453689
P粉440453689

全部回复(1)
P粉676821490

下面的代码显示了将自定义图标与 mdi 图标集一起添加到 Vuetify 并通过别名在组件中使用这两个图标的示例。

vuetify.js

import { createVuetify } from 'vuetify'

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

import folder from '@/customIcons/folderIcon.vue'
const aliasesCustom = {
  ...aliases,
  folder,
}

export const vuetify = createVuetify({
  icons: {
      defaultSet: 'mdi',
      aliases: {
        ...aliasesCustom
      },
      sets: {
        mdi,
      },
    },
})

folderIcon.vue(您的自定义图标)

<template>
 <svg>...</svg>
</template>

任何证监会

<template>
  <v-icon>$folder</v-icon>
  <v-icon>$mdiGithub</v-icon>
</template>

原始来源:Vuetify Discord 频道中的线程

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号