使用 Vuetify 并使用 CDN 导入图标时，有没有办法控制 svgs 的笔划宽度？

Question

我正在我的 public html 文件夹中的 cdn 中导入 tabler 图标：

<link rel="stylesheet" href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">

并且根据引入图标库的 Vuetify 文档（在 plugins/vuetify.js 中）：

export default new Vuetify({
    icons: {
        iconfont: "ti",
    }

这允许我在 Vue2 组件中使用 <v-icon>ti-pencil<v-icon>（例如）。所有这一切都很好。但是，当图标位于 <v-navigation-drawer> 内部时，它们会更大并且线条有点太粗。我只看到size 属性可以用，但它也缩小了图标，这不是我想要的。

有没有办法用 css 改变 svgs 上的笔画宽度？还是有另一种方法可以在导入后影响这些路径的厚度？也可以对 font-weight 进行调整，但遗憾的是对元素没有影响。

在此先感谢您的帮助。

Answer 1

看看这个codepen。

When using Vuetify and importing icons with CDN, is there a way to control the stroke width of the svgs?