Question

我缺少什么或做错了什么？我在logo.vue中创建了svg徽标，然后用作App.vue中的组件，该组件在vuetify.js中链接...

有什么我不知道的东西吗？（下面是我在Page上获得的输出）

App.vue（我要在其中使用徽标）

<v-list-item>
   <v-list-item-icon>
       <v-icon>mdi-home</v-icon>
   </v-list-item-icon>
   <v-icon v-text="'$vuetify.icons.custom'"></v-icon>
   <v-list-item-content>
       <v-list-item-title class="title">
           Einkaufsliste
       </v-list-item-title>
       <v-list-item-subtitle>
           Version 1.0
       </v-list-item-subtitle>
   </v-list-item-content>
</v-list-item>

logo.vue（我的SVG徽标组件）

<template>
    <svg class="logo" width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11.1705 7.41504H25.7354L25.7182 24.3902H10.7917L11.1705 7.41504Z" fill="#1774FC"/>
        <path d="M11.1707 8.03516V7.41531L10 8.03516H11.1707Z" fill="#125FC9"/>
        <path d="M25.7356 24.356V7.41526L24.2722 8.03504L25.7356 24.356Z" fill="#125FC9"/>
        <path d="M21.9815 9.26598C18.0666 1.26728 14.5269 4.66923 14.3892 9.26599L13.6489 9.4037C14.5786 -0.254603 19.709 2.10401 22.6874 9.26598C22.0676 9.2661 22.7218 9.26598 21.9815 9.26598Z" fill="#74ACFD"/>
        <path d="M21.8095 9.09354C17.5054 1.63903 15.4051 5.25443 14.4926 9.09354L13.7695 9.09365C15.3298 0.483393 19.5197 3.10237 22.3776 9.09354C21.7578 9.09365 22.5498 9.09354 21.8095 9.09354Z" fill="#125FC9"/>
        <g filter="url(#filter0_d)">
            <path d="M10 8.03516H24.2722L25.7356 24.3905H10.7919L10 8.03516Z" fill="#4591FD"/>
            <path d="M10.8872 24.2905L10.105 8.13516H24.1807L25.6262 24.2905H10.8872Z" stroke="#125FC9" stroke-width="0.2"/>
        </g>
        <path d="M17.0217 18.606C16.3994 17.4109 14.7671 15.7726 14.0288 15.1028C14.8621 14.8807 16.257 15.7682 16.8503 16.2397C18.5906 13.9024 20.8363 12.8951 21.7416 12.6836C19.3474 14.2276 17.5974 17.2752 17.0217 18.606Z" fill="white"/>
        <defs>
            <filter id="filter0_d" x="0" y="0.0351562" width="35.7356" height="36.3553" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
                <feOffset dy="2"/>
                <feGaussianBlur stdDeviation="5"/>
                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
            </filter>
        </defs>
    </svg>
</template>

<script>
export default {
  name: 'Logo'
}
</script>

我的Vuetify.js（我在其中链接了徽标组件）

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import Logo from '../views/logo.vue'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify({
    opts,
    icons: {
        'custom': {
            component: Logo,
        }
    },
})

Answer 1

我认为你的语法是错误的。我有同样的问题，但更换

<v-icon v-text="'$vuetify.icons.custom'"></v-icon>

与：

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

帮我修好了。

在Vuetify Vue中添加自定义图标或徽标

1 个答案: