Vue-cli 3 - 재료 설계 아이콘 설치

Vue-cli 3 - 재료 설계 아이콘 설치

Vue CLI 3 프로젝트에 설치하는 방법좋은 결과를 얻지 못하고 사용하려고 했지만 튜토리얼을 찾을 수 없었습니다.

사용.

사용 가능한 아이콘의 전체 목록은 https://materialdesignicons.com/에서 확인할 수 있습니다.첫 번째 로드 시 사이트에서 페이지 하단에 아이콘 미리보기 목록을 표시하는 데 몇 초 정도 걸릴 수 있습니다.원하는 아이콘 위에 마우스를 올려놓고 툴팁 상단에 표시된 아이콘 이름을 적어둡니다.또는 아이콘 미리 보기를 클릭하여 아이콘 세부 정보를 팝업으로 표시합니다.다음 형식을 사용하여 Vue 구성 요소의 아이콘을 가져올 수 있습니다.

import FooIcon from 'vue-material-design-icons/__ICON_NAME__.vue'

예를 들어, 이 스크린샷은 다음 아이콘에 대한 도구 설명을 보여 줍니다.auto-fix:

Vue 구성 요소에서는 다음과 같은 아이콘을 가져옵니다.

import AutoFixIcon from 'vue-material-design-icons/auto-fix.vue'

로컬 컴포넌트로 선언합니다.

export default {
  name: 'my-component',
  components: {
    AutoFixIcon
  }
}

컴포넌트 템플릿에서 사용합니다.

<template>
  <AutoFixIcon/>
</template>

튜토리얼

1. 신규 작성vue-cli프로젝트(예: 이름 지정)vue-md-icons-demo를 선택합니다.default셋업 프롬프트:

   vue create vue-md-icons-demo
   

2. 새로 생성된 프로젝트 디렉토리에 CD를 넣습니다.

   cd vue-md-icons-demo
   

3. 설치하다vue-material-design-iconsNPM에서 패키지:

   npm i -S vue-material-design-icons
   

4. 인src/main.js, 아이콘의 스타일을 Import 합니다.

     import Vue from 'vue'
     import App from './App.vue'
   + import 'vue-material-design-icons/styles.css'
   

5. 인src/App.vue(또는 컴포넌트 파일에서) 사용할 아이콘을 Import하고(위의 사용법을 참조), 로컬컴포넌트로 선언합니다.이 경우 다음 아이콘을 가져옵니다.air-conditioner:

     <script>
     import HelloWorld from './components/HelloWorld.vue'
   + import AirConditionerIcon from 'vue-material-design-icons/air-conditioner.vue'
   
     export default {
       name: 'app',
       components: {
   -     HelloWorld
   +     HelloWorld,
   +     AirConditionerIcon
       }
     }
   

6. 인src/App.vue템플릿에 아이콘 요소를 선언합니다(즉,<AirConditionerIcon/>이 경우) :

   <template>
     <AirConditionerIcon/>
   </template>
   

데모

공식 재료 디자인 아이콘 가이드: https://dev.materialdesignicons.com/getting-started/vue

설치하다

npm install @mdi/js @jamescoyle/vue-icon

프로젝트로 Import

import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

컴포넌트 예:

<template>
  <svg-icon type="mdi" :path="path"></svg-icon>
</template>


<script>
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiAccount } from '@mdi/js'

export default {
    name: "my-cool-component",

    components: {
        SvgIcon
    },

    data() {
        return {
            path: mdiAccount,
        }
    }
}
</script>

언급URL : https://stackoverflow.com/questions/51792391/vue-cli-3-material-design-icons-installation