如何更改VMware Clarity Design System品牌图标大小

Question

我正在使用VMware Clarity Design System UI（https://vmware.github.io/clarity/）并正在运行他们的种子应用程序。我试图用我自己的品牌替换他们的品牌图标，但它的大小不同。我注意到该图标似乎是硬编码为36px x 36px。如果我尝试在CSS中设置新的大小，它仍然呈现为36px x 36px。这是硬编码的吗？

LogoSize

Answer 1

就是这样。我以为我需要为图像添加大小，而不是.clr-icon类。这有效：

.header .branding .clr-icon {
    height: 13px;
    width: 73.9px;
    &.clr-dell-logo {
        background-image: url(../images/DellLogoWht.png);
    }
}

Answer 2

当你想用css设置大小时，你的答案是正确的（我向你投票反映了这一点）。您还可以使用 clr-icon 元素上的尺寸属性设置图标大小：

__call__

我们在这里使用了size属性Clarity Icons Documentation

大概在页面下方1/2或搜索设置图标大小。仅供参考 - 我们正在更新Clarity Icons的文档。