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

Question

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

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

Answer 1

您只需添加 CSS 即可做到这一点。

像这样的东西：

超文本标记语言

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

CSS

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

工作代码笔