Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!
3961 단어 vuetifyjsJavaScriptVutifyVue.js
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 같은 단일 구성 요소로 그곳에서 가져오는 것은 정확한 운용이다.
Reference
이 문제에 관하여(Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/reud/items/d47c4de86f591b59df09
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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 같은 단일 구성 요소로 그곳에서 가져오는 것은 정확한 운용이다.
Reference
이 문제에 관하여(Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/reud/items/d47c4de86f591b59df09
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
해동된 icomoon 폴더를 src/assets에 설정하십시오.
아마도 이런 느낌일 거예요.
빨리 써보세요.
이번에 Vue 프로젝트에 vuetify를 투입한 후 Hello World.vue를 편집하고 동작을 확인합니다.
style.css를 가져와서 icon-{名前}
실행해 보십시오.
나는 방금svg라는 이름과emoi라는 이름을 아이콘에 추가했는데 사용할 때 상술한 것처럼 변했다.
여기서 한번 실행을 해보도록 하겠습니다.
잘 진행되고 있습니다.이렇게 하면 아이콘을 표시할 수 있다.
추가 설정
가져온 스타일입니다.css를 봤는데 색상 설정이 있어요.
v-ion에서 색상을 설정하고 싶은 경우 스타일.css의 색 설정을 삭제해야 합니다.
실제 운용
나는 부모 구성 요소로 import을 진행하는 것이 그것이라고 생각하기 때문에 v-ion을 포장하여ore-v-ion 같은 단일 구성 요소로 그곳에서 가져오는 것은 정확한 운용이다.
Reference
이 문제에 관하여(Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/reud/items/d47c4de86f591b59df09
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
가져온 스타일입니다.css를 봤는데 색상 설정이 있어요.
v-ion에서 색상을 설정하고 싶은 경우 스타일.css의 색 설정을 삭제해야 합니다.
실제 운용
나는 부모 구성 요소로 import을 진행하는 것이 그것이라고 생각하기 때문에 v-ion을 포장하여ore-v-ion 같은 단일 구성 요소로 그곳에서 가져오는 것은 정확한 운용이다.
Reference
이 문제에 관하여(Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/reud/items/d47c4de86f591b59df09
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Vuetify의 v-icon에서 직접 만든 SVG 아이콘을 사용하고 싶어요!!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/reud/items/d47c4de86f591b59df09텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)