Skip to content

V-icon

Categories

Material Design Icons

다음 다이트에서 목록을 찾아볼 수 있다.

Options

icons.iconfont
기본값 지정.
(확인은 안했지만) 기본 아이콘 클래스명을 안넘겨도 된다.

머티리얼 디자인 아이콘 - JS SVG

에 지정된 대로 SVG 경로를 사용하십시오. @mdi/js. 프로덕션용으로 애플리케이션을 최적화할 때 권장되는 설치입니다. 당신은 오직 당신이 더 많은 기본 아이콘보다 더 사용하려는 경우이를 포함해야합니다. 

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

mdiSvg 아이콘 글꼴을 지정합니다 . 

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
})

훨씬 더 작은 번들 크기를 부여하는 사용하는 아이콘만 사용자 정의 가져올 수 있습니다. 

<!-- Vue Component -->

<template>
  <v-icon>{{ svgPath }}</v-icon>
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      svgPath: mdiAccount
    }),
  }
</script>

How to use

MDI 사용방법: 

<v-icon>mdi mdi-access-point</v-icon>

Font Awesome 사용방법: 

<v-icon>fas fa-spinner</v-icon>

See also