Vuetify 아이콘 크기

Vuetify 아이콘 크기

최근에 Vuetify를 사용하는 앱을 사용하다가 Vuetify 기본 색상을 변경하는 데 어려움을 겪었습니다.그래서 결국 이렇게 끝냈습니다.

https://github.com/vuetifyjs/vuetify/issues/299

여기 적혀있는 대로 다음 코드를 추가했습니다.

 <style lang="stylus">
  @require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
  $theme := {
    primary: #009688
    accent: #FFC107
    secondary: #00796B
    info: #B2DFDB
    warning: $red.base
    error: $red.base
    success: $green.base
  }
  @require '../node_modules/vuetify/src/stylus/main.styl'
</style>

App.vue에서

그래서 앱에서 색변경을 테스트해봤더니 예상대로 잘 작동했어요.그 후 아래 그림과 같이 아이콘의 크기가 변경되었음을 알 수 있었습니다.

전에

끝나고

자, 제 질문은 다음과 같습니다.

CSS를 사용하지 않고 이 문제를 해결할 수 있는 방법이 있습니까?만약 그렇다면, 어떻게?아니면 방법이 없다면 CSS를 사용하여 어떻게 해결하면 좋을까요?

아이콘 크기를 지정할 수 있습니다.px사용.size에 있어서의 재산.Vuetify아이콘을 클릭합니다.

<v-icon size="25">home</v-icon>

또는 v-icon 태그에 x-small, small, medium, large 및 x-large를 사용할 수 있습니다.

<v-icon small >home</v-icon>

현재 버전(0.17.6)에서는 커스텀아이콘 크기를 작성하기 위해 css가 필요합니다.

앱 전체에서 아이콘의 사용자 정의 기본 크기를 설정하려면 해당 아이콘의 대상을 지정해야 합니다.

아이콘 크기를 지정하려면 다음을 사용합니다.

.icon {
  font-size: 20px;
}

Vuetify v1.0-alpha.1 이후를 사용하는 경우<v-icon>컴포넌트에는size정확한 크기를 설정하는 데 사용할 수 있는 속성입니다.

다음은 v-icon의 인라인 css 샘플입니다.

<v-icon style="font-size: 5px;">home</v-icon>

여기 샘플펜이 있습니다.

https://codepen.io/anon/pen/LdpgmY

이 기능을 사용하는 것을 권장합니다.<i>태그를 지정하고 아이콘 클래스를 직접 설정합니다(가능한 경우). <v-icon>v-icon 클래스는 글꼴 크기만 원하는 경우 특정 글꼴 크기를 설정할 수 있습니다.

색상 변경으로 인해 아이콘 크기가 변경되는 문제가 발생하는지는 모르겠지만 매번 아이콘 크기를 설정하지 않으려면 옵션으로 다음과 같은 글로벌 기본값을 덮어쓸 수 있습니다.

$icon-size: 20px;

이에 대한 자세한 내용은 Vuetify 문서를 참조하십시오.

언급URL : https://stackoverflow.com/questions/48119054/vuetify-icon-size