Vuetify에서 사용자 지정 SVG 아이콘을 추가하는 방법 - Vue

Vuetify에서 사용자 지정 SVG 아이콘을 추가하는 방법 - Vue

부에티피 1.1.8과 vue 3.0.0-rc.3을 사용하고 있다.뷰잉으로 지원되는 재료 아이콘 또는 FontAwesome 아이콘의 기본 아이콘 대신 내가 설계한 프로젝트의 사용자 지정 SVG 아이콘 중 일부를 사용하려고 함

나는 사용해 본 적이 있다.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>.

나는 또한 그들이 사용자 지정 아이콘을 사용하는 것에 대해 언급했던 시각화 문서를 읽었지만 그것 또한 도움이 되지 않는다고 생각한다.

누가 이것 좀 도와줘.재료 각도로 지지되는 스프라이트 이미지를 사용해야 할 수 있음

TL;DR

사용자 정의 SVG 아이콘이 있으며, 이 아이콘을<v-icon>customIcon</v-icon>시각적으로

v2 문서 단위

svg 아이콘 코드가 포함된 사용자 지정 구성 요소 생성

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

에 사용자 지정 아이콘 구성 요소 포함vuetify구성:

// 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>

실제로 Vue 단일 파일 구성 요소 내부에 vue 아이콘을 생성한 다음 VICon(v-icon) 구성 요소 내에서 vuetify가 사용할 수 있도록 이 구성 요소를 등록하십시오.

Vue 구성 요소 아이콘을 생성하려면 Vue Cookbook에 표시된 것처럼 템플릿 태그 내부에 SVG를 배치하면 된다.이 문서는 모든 vue 앱에서도 구성 요소를 사용하는 데 도움이 될 것이다.

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

다음으로 이 구성 요소를 뷔제화하여 등록해야 한다.Vuetify 구성은 인덱스 파일에 있거나, 최신 vue-cli에서는 @/src/plugins/vuetify.js에서 찾을 수 있다.

그곳에서 당신은 Vuetify의 사이트에 표시된 대로 당신의 구성 요소를 등록할 수 있다(이미 이 링크를 언급하셨지만), 이 설명서가 업데이트되었거나 불명확한 것일 수도 있다.

이제 이 부품은 등록될 것이며 VApp 내부 어디에서나 사용할 수 있다.그러나 표준 아이콘과 달리 $vuetify.icons를 사용해야 한다.v-icon 슬롯 안에 [icon-name].Vuetify 예제에서는 아이콘이 'product'로 등록되어 있다.이 기능을 사용하려면

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

나는 이것을 진행중인 프로젝트에서 작업하고 있다.현 상태의 한 분기를 여기에 남겨 두겠다.

아이콘 구성요소는 /src/icons에 있다.Vuetify 구성은 /src/plugins에 있고, svg 아이콘 구성 요소는 /src/components/PlotSelector에 있다.부에를 하다

Vuetify & Nuxt의 경우 다음과 같이 할 수 있다.

로고 파일을 정적 폴더에 넣고 만들기CompanyLogo.vue내부 구성 요소 폴더:

<template>
  <img src="/company-logo.svg">
</template>

그런 다음 다음을 통해 다른 모든 구성 요소에 사용할 수 있다.<CompanyLogo />

당신이 원한다면, 예를 들어 다음과 같이 애니메이션을 만들 수도 있다.

<template>
  <img
    class="LogoAnimation"
    src="/company-logo.svg"
  >
</template>

<style>
.LogoAnimation {
  transform: rotateY(560deg);
  animation: turn 3.5s ease-out forwards 1s;
}

@keyframes turn {
  100% {
    transform: rotateY(0deg);
  }
}
</style>

Nuxt에 대한 나의 마지막 해결책, 그러나 당신은 그것을 순수한 vuejs에 채택할 수 있다.

npm i '@nuxtjs/svg' -D

nuxt.config.js:

buildModules: [
  '@nuxtjs/svg'
],
vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  optionsPath: './vuetify.config.js'
},

vuetify.config.js

icons: {
  iconfont: 'mdi',
  values: {
    chat: {
      component: require('~/assets/img/icons/chat.svg?inline')
    }
  }
}

chat.svg(설정하는 것을 잊지 마십시오: fill="current Color")

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.5569 3H3.44278C2.09549 3 1 4.09596 1 5.44313V13.1331C1 14.4802 2.09549 15.5762 3.44278 15.5762H13.3415L15.4019 18.0107C15.4723 18.0944 15.5757 18.1402 15.6816 18.1402C15.7238 18.1402 15.766 18.1323 15.8075 18.1173C15.952 18.0643 16.0478 17.927 16.0478 17.7739V15.5761H16.5572C17.9043 15.5761 19 14.4802 19 13.133V5.44313C18.9997 4.09596 17.9044 3 16.5569 3ZM7.18042 10.2514C6.7072 10.2514 6.32357 9.86785 6.32357 9.39499C6.32357 8.92141 6.7072 8.53796 7.18042 8.53796C7.65328 8.53796 8.03709 8.92141 8.03709 9.39499C8.03709 9.86791 7.65328 10.2514 7.18042 10.2514ZM9.99967 10.2514C9.52645 10.2514 9.143 9.86785 9.143 9.39499C9.143 8.92141 9.52645 8.53796 9.99967 8.53796C10.4725 8.53796 10.8562 8.92141 10.8562 9.39499C10.8562 9.86791 10.4725 10.2514 9.99967 10.2514ZM12.9953 10.2514C12.522 10.2514 12.1382 9.86785 12.1382 9.39499C12.1382 8.92141 12.522 8.53796 12.9953 8.53796C13.4681 8.53796 13.852 8.92141 13.852 9.39499C13.852 9.86791 13.4681 10.2514 12.9953 10.2514Z" fill="currentColor"/>
</svg>

모든 구성 요소:

<v-icon>$chat</v-icon>

호프, 이게 너희들에게 도움이 돼.

참조URL: https://stackoverflow.com/questions/51614557/how-to-add-custom-svg-icon-in-vuetify-vue