Vue에서 Technology 아이콘을 사용하고 싶어요!【DEVICON】
Vue.js에서 DEVICON 아이콘을 사용하려면
DEVICON 기술류 아이콘을 아이콘 서체로 나눠주는 웹사이트에는 풍부한 프로그래밍 언어 표시 등이 마련됐다.앞서 기고한 여기 기사.에서도 사용했다.
이번에는 Vue CLI로 제작된 웹사이트에서 아이콘을 사용하려다 빠져서 아이콘 가져오기 방법을 노트로 남겼다.
npm로 설치 가능
설명을 보니 npm에 설치하여 사용할 수 있을 것 같습니다
지침에 따라 설치
다음 명령을 사용하여 터미널에서 설치합니다.
npm i devicon
아이콘을 표시하기 위해 템플릿에 다음 탭을 넣으세요.hello.vue
<i class="devicon-vuejs-plain"></i>
하지만 이것만으로는 표시할 수 없습니다.어떻게 사용하는 게 좋을까요?
npm 페이지를 번역해 보고 Google에서 사용법을 검색해 보았지만 해결책이 적힌 페이지를 찾지 못하고 빠져들었습니다.npm 개발은 처음이라 지식이 부족한 점도 있다.js와 App.vu 파일에서 오류를 시험적으로 실행한 결과 시간이 걸렸지만 가져오는 데 성공했습니다.
해결책
App.vue로 다음과 같이 기술하다.
App.vue
import "devicon";
App.vue에 위에 덧붙여서 잘 나왔어요.
npm에서 아이콘 글씨체를 사용한 적이 없어서 상당히 오랜 시간 푹 빠졌어요.다른 CSS 파일은 읽는 방법과 다르기 때문에 이해하기 어려울 것 같습니다.
그 다음엔 index.)에 링크가 직접 기술되어 있으며 CDN에서 읽기를 시도합니다.
이번에 도입했을 때 npm와 vue의 이해가 부족했던 것 같아요.npm를 사용하면 사용하지 말아야 할 언어이기 때문에 수정해 주세요. 기교 때문에 정보 같은 건 없죠.좀 더 깊이 파고들 필요가 있다.npm에서 DEVICON 아이콘을 가져오는 기사와 정보가 없기 때문에 비망록으로 보존합니다.같은 열성적인 사람의 참고가 됐으면 좋겠어요.
끝까지 읽어주셔서 감사합니다.
Reference
이 문제에 관하여(Vue에서 Technology 아이콘을 사용하고 싶어요!【DEVICON】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ryuu/articles/how-use-devicon텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)