web-dev-qa-db-ja.com

VuetifyでカスタムSVGアイコンを追加する方法-Vue

私はvuetify 1.1.8とvue 3.0.0-rc.3を使用しています。デフォルトではなく、自分で設計したカスタムSVGアイコンをプロジェクトで使用しようとしています。 vuetifyでサポートされているMaterial IconsまたはFontAwesome Iconsのアイコン

vue-svg-loaderを使用してカスタムsvgアイコンをロードし、コンポーネントとして使用してみました。このようなもの

<template>
    <icon-one></icon-one>
</template>

<script>
    import iconOne from './public/iconOne.svg'
    export default{
        components:{
                 iconOne
          }
    }
</script>

しかし、vue-svg-loaderの問題は、<v-text-field>のappend-iconや、<v-icon>を自由に使用できる他の多くの場所では使用できないことです。

また、カスタムアイコンの使用について言及している vuetify docs も読みましたが、それも役に立たないと思います。

誰かがこれを手伝ってくれますか？材料の角度によってサポートされているように私はスプライト画像を試す必要があります

TL; DR

カスタムの自作SVGアイコンがあります。それらをVuetifyで<v-icon>customIcon</v-icon>として使用したいです

svgvuejs2iconsvuetify.js
9
The Observer Man

実際、vueアイコンを独自のVue単一ファイルコンポーネント内に作成し、このコンポーネントを登録して、vuetifyがVICon（v-icon）コンポーネント。

vueコンポーネントアイコンを作成するには、 Vue Cookbook に示すように、テンプレートタグ内にSVGを配置するだけです。このドキュメントは、コンポーネントの使用に役立つはずです。 vueアプリでも同様です。

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

次に、このコンポーネントをvuetifyに登録する必要があります。 Vuetify設定は、インデックスファイルまたは最新のvue-cliにある場合があります。これは@/src/plugins/vuetify.jsにあります。

そこで、 Vuetifyのサイト （すでにこのリンクについて言及している）に示すようにコンポーネントを登録できますが、このドキュメントは更新版であるか不明確である可能性があります。

これで、このコンポーネントが登録され、VApp内のどこでも使用できるようになります。ただし、標準のアイコンとは異なり、v-iconのスロット内で$ vuetify.icons。[icon-name]を使用する必要があります。 Vuetifyの例では、アイコンは「製品」として登録されています。これを使用するには、

<v-icon>>$vuetify.icons.product</v-icon>

私はこれを進行中のプロジェクトで働いています。現在の状態のブランチを残します ここ 。

アイコンコンポーネントは/ src/iconsにあります。 Vuetify構成は/ src/pluginsにあり、svgアイコンコンポーネントは/src/components/PlotSelector.vueにあります。

14
Jacob Goodwin

Vuetify v2ごと docs

SVGアイコンコードを含むカスタムコンポーネントを作成する

// CustomIcon.vue
<template>
  <svg>
    ...
  </svg>
</template>

カスタムアイコンコンポーネントをvuetify configに含めます。

// vuetify.ts

import CustomIcon from '@/components/CustomIcon.vue'

export default new Vuetify({
  theme: {/**/},
  icons: {
    values: {
      custom: { // name of our custom icon
        component: CustomIcon, // our custom component
      },
    },
  },
})

そのまま使う

<v-icon>$vuetify.icons.custom</v-icon>

またはショートカット：

<v-icon>$custom</v-icon>

5
Traxo