Vuetify 3:使用 Svg 作為 v 圖標
P粉440453689
P粉440453689 2023-08-28 21:34:41
0
1
565
<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;"><v-icon size="40">$vuetify.icons.test</v-icon></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 頻道中的線程

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板