Question

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

在vuetify.js文档中，该示例仅使用按钮概述了图标。但是我的要求是在不使用按钮的情况下获得轮廓图标。

Answer 1

您可以通过仅添加CSS来实现。

类似的东西：

HTML

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

CSS

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

Working CodePen

Answer 2

@Toodoo 上面的解决方案是最简单和最有效的，但无论出于何种原因都不适合我。

我碰到了 this 很棒的字体，它直接源自 Material 的，可以很容易地导入到任何组件中：

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

...瞧，无需创建任何自定义类，所有图标都将神奇地勾勒出轮廓（请参阅文档了解更多选项，并给他一个星！）

Answer 3

首先，确保在您的 index.html 文件中下载 Material Design Icons（包括 Outlined）：

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

现在，您只需将 material-icons-outlined 类添加到您的 v-icon 中即可使用 Outlined 图标。

示例：

<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 中几乎所有类型的表单输入。

如何在Vuetify应用中使用大纲图标？

3 个答案: