[vue.js][App] FontAwesome 아이콘 종류 검색

 

https://fontawesome.com/cheatsheet에 접속하시면 무료로 사용할수 있는 아이콘들을 확인할수 있습니다. 

Font Awesome

 

 

 

조금더 쉽게 아이콘 검색을 위한 app을 만들어 보았습니다.

 

먼저 클립보드 복사 붙여 넣기를 쉽게 하기 위해 vue-clipboard2 를 설치합니다.

 

yarn add vue-clipboard2

main.js 파일을 아래와 같이 수정합니다. (클립보드를 사용할수 있게 변경합니다.)

 

import Vue from 'vue'
import locale from 'element-ui/lib/locale/lang/ko'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import axios from "axios";
import VueClipboard from 'vue-clipboard2'
import App from './App.vue'
​
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
Vue.use(Element, {locale},{ size: 'small', zIndex: 3000 });
Vue.use(VueClipboard);
​
new Vue({
​​router,
​​render: h => h(App),
}).$mount('#app')

components/IconSearch.vue 파일을 아래와 같이 작성합니다.

<template>
​​<el-container>
​​​​<el-main>
​​​​​​<el-row>
​​​​​​​​<el-col :span="24">
​​​​​​​​​​<h3>아이콘 검색</h3>
​​​​​​​​</el-col>
​​​​​​</el-row>
​​​​​​<el-row>
​​​​​​​​<el-col :span="24">
​​​​​​​​​​<el-input placeholder="아이콘 이름을 입력하세요 ex) hotel" v-model="searchStr" @input="iconSearch"></el-input>
​​​​​​​​</el-col>
​​​​​​</el-row>
​​​​​​<el-row>
​​​​​​​​<el-col :span="22">
​​​​​​​​​​<ul v-if="searchIcon.length > 0">
​​​​​​​​​​​​<li v-for="item in searchIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
​​​​​​​​​​​​​​<i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
​​​​​​​​​​​​​​<span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
​​​​​​​​​​​​</li>
​​​​​​​​​​</ul>
​​​​​​​​</el-col>
​​​​​​</el-row>
​​​​​​<el-row>
​​​​​​​​<el-col :span="24">
​​​​​​​​​​<h3>아이콘 색인</h3>
​​​​​​​​</el-col>
​​​​​​</el-row>
​​​​​​<el-row>
​​​​​​​​<el-col :span="2">
​​​​​​​​​​<ul v-if="alphabet.length > 0">
​​​​​​​​​​​​<li v-for="item in alphabet" :key="item">
​​​​​​​​​​​​​​<button @click="iconIndex(item)">{{item}}</button>
​​​​​​​​​​​​</li>
​​​​​​​​​​</ul>
​​​​​​​​</el-col>
​​​​​​​​<el-col :span="22">
​​​​​​​​​​<ul v-if="indexIcon.length > 0">
​​​​​​​​​​​​<li v-for="item in indexIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
​​​​​​​​​​​​​​<i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
​​​​​​​​​​​​​​<span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
​​​​​​​​​​​​</li>
​​​​​​​​​​</ul>
​​​​​​​​</el-col>
​​​​​​</el-row>
​​​​</el-main>
​​</el-container>
</template>
​
<script>
const URL = "https://onehit9.github.io/";
export default {
​​name: "IconSearch",
​​created() {
​​​​this.alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
​​​​this.$axios.get(URL + 'apt/' + 'font.csv', {params: {}})
​​​​​​​​.then((response) => {
​​​​​​​​​​this.icons = response.data.split(",");
​​​​​​​​​​this.iconIndex('a');
​​​​​​​​});
​​},
​​data() {
​​​​return {
​​​​​​searchStr: '',
​​​​​​message: '',
​​​​​​alphabet : [],
​​​​​​indexIcon: [],
​​​​​​searchIcon: [],
​​​​​​icons: [],
​​​​}
​​},
​​methods: {
​​​​iconIndex(idx) {
​​​​​​this.indexIcon = this.icons.filter(item => item.charAt(0) === idx);
​​​​},
​​​​iconSearch(str) {
​​​​​​if(str.length <2 ) {
​​​​​​​​this.searchIcon = [];
​​​​​​​​return;
​​​​​​}
​​​​​​this.searchIcon = this.icons.filter(item => item.indexOf(str) > -1);
​​​​},
​​​​copyClipboard(item) {
​​​​​​const text = '<i class="fas fa-' + item+'"></i>';
​​​​​​this.$copyText(text);
​​​​​​this.$message(text + ' 클립보드에 복사되었습니다. 붙여넣기(ctrl + v) 하여 사용하실수 있습니다.');
​​​​},
​​}
}
</script>

코드설명

1. font.csv 파일을 만들어서 사용할수 있는 아이콘의 문자열을 , 로 분리시켜 저장합니다.

2.axios로 csv 파일을 불러와서 icons array에 추가합니다.

3. 해당 검색어 및 인덱스에 맞는 아이콘만 필터하여 보여 줍니다.

4. 클릭시 클립보드에 복사되도록 copyText 를 실행합니다.

 

실행결과