[Vuejs] Mdi(Material Design Icons) offline

2020. 8. 18. 14:00ยท WEB/Vue.js
๋ชฉ์ฐจ
  1. MDI ์„ค์น˜
  2. ๐Ÿ‘ Vue
  3. ๐Ÿ‘ Nuxt
๋ฐ˜์‘ํ˜•

MDI ์„ค์น˜

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

๐Ÿ‘ Vue

// plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

๐Ÿ‘ Nuxt

default ๋กœ iconfont ๊ฐ€ mdi ๋กœ ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— css ํŒŒ์ผ๋งŒ ์ถ”๊ฐ€ํ•ด ์ฃผ๋ฉด ๋œ๋‹ค.

// nuxt.config.js

export default {
    css: [
        '@mdi/font/css/materialdesignicons.css',
    ],
}

์ฐธ๊ณ 

  • Vuetify Icons
  • Nuxt Vuetify Options
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'WEB > Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vue.js] Custom Directive : Outside Click Event  (0) 2021.01.13
[Vue.js] Custom Directive  (0) 2021.01.13
[Vuejs][VScode] 'v-slot' directive doesn't support any modifier.  (0) 2020.12.10
[Vuejs] v-html  (0) 2020.12.04
[Nuxtjs] ๋ฐฐํฌ ํ•  ๋•Œ console.log ํ•œ ๋ฒˆ์— ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•  (0) 2020.08.20
  1. MDI ์„ค์น˜
  2. ๐Ÿ‘ Vue
  3. ๐Ÿ‘ Nuxt
'WEB/Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Vue.js] Custom Directive
  • [Vuejs][VScode] 'v-slot' directive doesn't support any modifier.
  • [Vuejs] v-html
  • [Nuxtjs] ๋ฐฐํฌ ํ•  ๋•Œ console.log ํ•œ ๋ฒˆ์— ์ง€์šฐ๋Š” ๋ฐฉ๋ฒ•
S0PH1A
S0PH1A
๋ฐ˜์‘ํ˜•
S0PH1A
Web Programmer
S0PH1A
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ์ „์ฒด
    • About Me
    • Python
      • Python
      • Django
    • DataBase
      • MySQL
      • MongoDB
    • JAVA
      • JAVA
      • Spring
    • WEB
      • JavaScript
      • HTML
      • CSS
      • Vue.js
      • React
      • Nest.js
      • Node.js
      • Electron
      • PHP
    • Linux
    • Algorithm
    • ๊ธฐํƒ€
    • ์ƒ๊ฐ
    • App
      • ReactNative

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • nodejs
  • install
  • vue
  • Error
  • Python
  • vue.js
  • electron
  • django
  • javascript
  • mysql

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.2
S0PH1A
[Vuejs] Mdi(Material Design Icons) offline
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.