반응형
Ionicons: The premium icon pack for Ionic Framework
Ionicons is an open-sourced and MIT licensed icon pack.
ionic.io
1. index.html
- ionicont 링크 삽입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-til</title>
<link
href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css"
rel="stylesheet"
type="text/css"
/>
<!-- iconicons -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but vue-til doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>2. usage 페이지의 Basic usage 방법대로 icon 사용하기
3. MainPage.vue에 router-link 추가, ico-icon 사용
<template>
<div>
<div class="main list-container contents">
<h1 class="page-header">Today I Learned</h1>
<LoadingSpinner v-if="isLoading"></LoadingSpinner>
<ul v-else>
<PostListItem
v-for="postItem in postItems"
:key="postItem._id"
:postItem="postItem"
></PostListItem>
</ul>
</div>
<router-link to="/add" class="create-button">
<ion-icon name="add-outline"></ion-icon>
</router-link>
</div>
</template>
<script>
import PostListItem from '@/components/posts/PostListItem.vue';
import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
import { fetchPosts } from '@/api/index';
export default {
components: {
PostListItem,
LoadingSpinner,
},
data() {
return {
postItems: [],
isLoading: false,
};
},
methods: {
async fetchData() {
this.isLoading = true;
const { data } = await fetchPosts();
this.isLoading = false;
this.postItems = data.posts;
},
},
created() {
this.fetchData();
},
};
</script>
<style></style>
반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 127. Validation Check | 길이 유효성 검사 기능 (0) | 2023.02.19 |
|---|---|
| 126. 학습노트 등록 API 구현 | 학습노트 등록 Page Router 생성 (0) | 2023.02.19 |
| 124. cookies에 Login정보 저장 | store actions 으로 코드 리팩토링 (0) | 2023.02.19 |
| 123. 데이터 로딩 상태 표시 | LoadingSpinner (0) | 2023.02.18 |
| 122. 학습 노트 목록 아이템 컴포넌트화 | Props 내려주고 받는 방법 (0) | 2023.02.13 |