Vuetify 앱에서 아웃라인 아이콘을 사용하는 방법

Vuetify 앱에서 아웃라인 아이콘을 사용하는 방법

<v-btn outline large fab color="indigo">
   <v-icon>edit</v-icon>
</v-btn>

인vuetify.jsdocs. 이 예에서는 버튼을 사용한 아이콘만 보여 줍니다.단, 버튼을 사용하지 않고 아이콘의 윤곽을 표시해 둘 필요가 있습니다.

CSS만 추가하면 됩니다.

뭐 그런 거:

HTML

<v-icon class="outlined">edit</v-icon>

CSS

.v-icon.outlined {
                  border: 1px solid currentColor;
                  border-radius:50%;
                  height: 56px;
                  width: 56px;
}

현용 CodePen

@Too의 솔루션은 가장 간단하고 효과적이지만, 어떤 이유로든 나에게는 효과가 없었다.

어떤 컴포넌트에든 쉽게 Import할 수 있는 Material's에서 직접 파생된 이 멋진 글꼴을 우연히 발견했습니다.

<style lang="scss" scoped> 
@import '~material-icon-font/dist/Material-Icons.css';
.material-icons { font-family: 'Material Icons Outline'}
</style>

... 및 voila'는 커스텀 클래스를 만들 필요가 없습니다.모든 아이콘은 마법처럼 윤곽이 드러납니다(자세한 옵션은 설명서를 참조하고 별표를 붙입니다).

먼저 재료 디자인 아이콘(개요 포함)을 다운로드하십시오.index.html파일:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" />

이제 아웃라인 아이콘을 사용할 수 있습니다.material-icons-outlined당신의 클래스v-icon의

예:

<v-icon class="material-icons-outlined">
  file_upload
</v-icon>

에 아웃라인 아이콘을 사용해야 하는 경우:prepend-icon,:append-icon, 등, 대응하는 슬롯을 사용합니다.

<v-autocomplete
  ...
>
  <template v-slot:prepend>
    <v-icon class="material-icons-outlined">
      file_upload
    </v-icon>
  </template>
</v-autocomplete>

후자는 Vuetify에서 거의 모든 종류의 폼 입력과 함께 작동합니다.

<v-icon>
   mdi-calendar-month-outline
</v-icon>

아이콘 이름에 "-outline" 추가

언급URL : https://stackoverflow.com/questions/51375462/how-to-use-outline-icons-in-vuetify-app