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

Posted 2023-02-22

【中文标题】如何在 Vuetify 应用程序中使用大纲图标？

【英文标题】：How to use Outline icons in Vuetify app?

【发布时间】：2018-12-24 19:21:04

【问题描述】：

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

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

【问题讨论】：

我会把它作为相关的，因为将来可能会发生变化：***.com/questions/50303454/…

期待更多关于这个话题。谢谢！

【参考方案1】：

首先，确保在您的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 即可使用轮廓图标。

示例：

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

【参考方案2】：

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

我偶然发现了this美妙的字体，它直接来自Material's，可以很容易地导入到任何组件中：

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

...瞧，不需要创建任何自定义类，所有图标都会被神奇地勾勒出来（请参阅文档了解更多选项，并给这个家伙一颗星！）

【参考方案3】：

您只需添加 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