V-icon
Categories
- Web typography#Inline SVG - 웹에서 SVG 를 직접 인라인 하는 방법.
Material Design Icons
다음 다이트에서 목록을 찾아볼 수 있다.
Options
-
icons.iconfont
- 기본값 지정.
- (확인은 안했지만) 기본 아이콘 클래스명을 안넘겨도 된다.
머티리얼 디자인 아이콘 - JS SVG
에 지정된 대로 SVG 경로를 사용하십시오. @mdi/js. 프로덕션용으로 애플리케이션을 최적화할 때 권장되는 설치입니다. 당신은 오직 당신이 더 많은 기본 아이콘보다 더 사용하려는 경우이를 포함해야합니다.
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 사용방법:
Font Awesome 사용방법: