Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!

TL;DR


SVG 아이콘을 Webfont, 스타일로 만듭니다.css 가져오기 후<v-icon>{名前}</v-icon>에서 사용 가능합니다!

Vuetify 참조 오류


Vuetify의 v-ion은 Fontawesome 같은 아이콘을 이용할 수 있잖아요.
하지만 직접 만든 SVG 아이콘도 사용하고 싶네요.
참고서에 조작 방법을 기재하였다.
Installing Icons — Vuetify.js
간단히 번역하면
SVG 파일을 단일 어셈블리 Vue로 사용합니다.use 단계에서 설정하면 $vuetify입니다.icons.{이름} 사용할 수 있습니다!
그러니까
100개 정도 추가할 아이콘이 있으면 1개씩 단일 구성 요소 Vue로 만듭니다.use로 읽는 것은 매우 불편하고 코드가 길어지고 엉망이 될 수 있습니다.
그곳에서 여러 곳을 조사했는데 이런 투고가 있었다.
Vuetify Custom Icons Documentation is Horrendous : vuetifyjs
마지막 투고
Well, for anyone from the future who stumbles across this, I found a way to do it without using Vuetify at all.

So that site that I found, fontello.com, gives a css file that references the icons by class name, as I alluded to above. This class name is set on the site when you download the zip. 

So if you just import the css file as I did above, and then you can just reference the icon by name (with the prefix you used) in a v-icon and it should work.

If anyone sees this and is having trouble getting it to work, shoot me a message. 

I'm usually pretty good about answering within a couple days.
이런 댓글이 있습니다.
fontello.com 이 사이트에서 css 파일 import을 사용하면 읽을 수 있습니다!이런 내용.
많은 일이 있었어요. 이번엔 fontello예요.com이 아니라 같은 일을 하는 icomoon입니다.해볼게요.

사이트 방문



Icon Font & SVG Icon Sets ❍ IcoMoon
오른쪽 상단에 있는 IcoMoon App 클릭

이렇게 되면 SVG 아이콘을 끌어 놓습니다.

업로드된 아이콘이 표시되면 Webfont를 생성할 아이콘(여러 개 가능)을 클릭합니다.
클릭 후 오른쪽 아래에 있는 Generate Font를 클릭하여 전진

이 화면은 아이콘의 이름과 코드를 결정할 수 있다.
코드는 명확해야 하고, 이름은 알기 쉬운 이름을 붙여야 한다.여기 이름이 실제로 쓸 때 쓰는 거예요.
설정이 끝난 후 오른쪽 아래에 있는 Download 단추를 누르면 icomon이 표시됩니다.zip 파일 다운로드 시작

Vue 프로젝트에 추가


해동된 icomoon 폴더를 src/assets에 설정하십시오.
아마도 이런 느낌일 거예요.

빨리 써보세요.


이번에 Vue 프로젝트에 vuetify를 투입한 후 Hello World.vue를 편집하고 동작을 확인합니다.
style.css를 가져와서 icon-{名前} 실행해 보십시오.

나는 방금svg라는 이름과emoi라는 이름을 아이콘에 추가했는데 사용할 때 상술한 것처럼 변했다.
여기서 한번 실행을 해보도록 하겠습니다.

잘 진행되고 있습니다.이렇게 하면 아이콘을 표시할 수 있다.

추가 설정


가져온 스타일입니다.css를 봤는데 색상 설정이 있어요.
v-ion에서 색상을 설정하고 싶은 경우 스타일.css의 색 설정을 삭제해야 합니다.

실제 운용


나는 부모 구성 요소로 import을 진행하는 것이 그것이라고 생각하기 때문에 v-ion을 포장하여ore-v-ion 같은 단일 구성 요소로 그곳에서 가져오는 것은 정확한 운용이다.

좋은 웹페이지 즐겨찾기