How to use ionicons in Devextreme Vuejs

2020-01-30

ionicons 홈페이지

https://ionicons.com/

Environments

Devextreme Vuejs Project
- https://js.devexpress.com/Documentation/Guide/Vue_Components/Create_a_DevExtreme_Application/
Devextreme Vue Template
- https://github.com/DevExpress/devextreme-vue-template#devextreme-vue-template

단계

1. Download ‘Designer Pack’

ionicons 홈페이지에 오른쪽 상단에 보면 Designer Pack을 다운로드할 수 있음.

2. css/ font/ 폴더를 vuejs 프로젝트의 assets/ 폴더 아래 붙여넣는다.

3. main.js에 css를 import 한다.

import './assets/css/ionicons.css';

4. npm run build 또는 npm run dev(serve)

사용하기

devextreme-vue-template/app-navigation.js 에서 icon 부분을 다음과 같이 변경한다.

export default {[
   {
     text: "Dashboard",
     path: "/dashboard",
     icon: "ion ion-alert"
   },
   {
     text: "App Mgmt",
     path: "/app-mgmt",
     icon: "ion ion-android-add"
   }
 ]
...

ionicons devextreme vuejs