Vue로 기술계 아이콘을 사용하고 싶다! 【DEVICON】
Vue.js에서 DEVICON 아이콘을 사용하고 싶습니다.
DEVICON 은 기술계의 아이콘을 아이콘 폰트로서 배포하고 있는 사이트에서 프로그래밍 언어의 로고등이 풍부하게 준비되어 있습니다. 이전에 게시한 이 기사 에서도 사용했습니다.
이번에는 Vue CLI를 사용하여 작성한 사이트 내에서 아이콘을 사용하려고 할 때 조금 빠졌기 때문에 아이콘의 도입 방법을 메모로 남겨 둡니다.
npm으로 설치할 수 있습니다.
설명대로 설치해 봅니다.
터미널에서 다음 명령으로 설치.
npm i devicon
아이콘을 표시하기 위해 템플릿 내에 다음 태그를 넣어 보자.
hello.vue
<i class="devicon-vuejs-plain"></i>
그러나 이것만으로는 표시되지 않았습니다.
어떻게 사용해야합니까?
npm의 페이지를 번역하거나 보거나 Google에서 사용법에 대해 검색해 보았습니다만, 해결책을 쓰고 있는 페이지는 보이지 않아서 빠졌습니다. 처음으로 npm을 사용해 개발했기 때문에 지식 부족한 부분도 있을까와 index.js나 App.vue 파일 중에서 시행착오한 결과, 시간은 걸렸습니다만 도입에 성공했습니다.
해결책
App.vue에서 다음과 같이 설명.
App.vue
import "devicon"; App.vue 안에 위의 문장을 추가했는데, 잘 표시해 주었습니다.
아이콘 폰트를 npm으로 사용한 적이 없었기 때문에 상당한 시간 빠져 버렸습니다. 다른 CSS 파일과 읽는 방법이 다르기 때문에 조금 이해하기 어렵다고 느꼈습니다.
그 후 index.html 안에 링크 태그를 직접 기술해 CDN으로부터 읽어들이는 것도 시도했는데 할 수 있었습니다.
이번 도입에 있어서 npm과 vue의 이해가 아직 부족하다고 느꼈습니다. npm을 사용한다면 사용해서는 안되는 말이므로 수정해주세요 테크닉 때문에 정보가 없었다든가? 더 파고 조사해 볼 필요가 있을 것 같습니다. npm에서 DEVICON 아이콘을 도입하고 있는 기사나 정보가 없었기 때문에 비망록으로서 남겨 둡니다. 똑같이 빠져 있는 사람의 참고가 되면 다행입니다.
끝까지 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(Vue로 기술계 아이콘을 사용하고 싶다! 【DEVICON】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hacryu_4616/items/7d2a568a2dfc45237f6c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
설명대로 설치해 봅니다. 터미널에서 다음 명령으로 설치. npm i devicon 아이콘을 표시하기 위해 템플릿 내에 다음 태그를 넣어 보자. hello.vue <i class="devicon-vuejs-plain"></i> 그러나 이것만으로는 표시되지 않았습니다. 어떻게 사용해야합니까? npm의 페이지를 번역하거나 보거나 Google에서 사용법에 대해 검색해 보았습니다만, 해결책을 쓰고 있는 페이지는 보이지 않아서 빠졌습니다. 처음으로 npm을 사용해 개발했기 때문에 지식 부족한 부분도 있을까와 index.js나 App.vue 파일 중에서 시행착오한 결과, 시간은 걸렸습니다만 도입에 성공했습니다. 해결책 App.vue에서 다음과 같이 설명. App.vue import "devicon"; App.vue 안에 위의 문장을 추가했는데, 잘 표시해 주었습니다. 아이콘 폰트를 npm으로 사용한 적이 없었기 때문에 상당한 시간 빠져 버렸습니다. 다른 CSS 파일과 읽는 방법이 다르기 때문에 조금 이해하기 어렵다고 느꼈습니다. 그 후 index.html 안에 링크 태그를 직접 기술해 CDN으로부터 읽어들이는 것도 시도했는데 할 수 있었습니다. 이번 도입에 있어서 npm과 vue의 이해가 아직 부족하다고 느꼈습니다. npm을 사용한다면 사용해서는 안되는 말이므로 수정해주세요 테크닉 때문에 정보가 없었다든가? 더 파고 조사해 볼 필요가 있을 것 같습니다. npm에서 DEVICON 아이콘을 도입하고 있는 기사나 정보가 없었기 때문에 비망록으로서 남겨 둡니다. 똑같이 빠져 있는 사람의 참고가 되면 다행입니다. 끝까지 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(Vue로 기술계 아이콘을 사용하고 싶다! 【DEVICON】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hacryu_4616/items/7d2a568a2dfc45237f6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
