All geek questions in one place

How to Resize Design System Brand Icon for VMware Clarity

I play with the VMware Clarity design system user interface ( https://vmware.imtqy.com/clarity/ ) and I run my seed application. I'm trying to replace my corporate icon with my own, but this is a different size. I notice that the icon seems hardcoded to 36px x 36px. If I try to set a new size in CSS, it still displays 36px x 36px. Is it hardcoded?

LogoSize

+5
source share
2 answers

That's all. I thought I needed to add the size of the image, and not to the .clr-icon class. It works:

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

Your answer is correct if you want to set the size using css (I voted for you to reflect this). You can also set the icon size using the size attribute in the clr-icon element:

<clr-icon shape="info" size="48"></clr-icon>

We have an example of using the size attribute here. Clarity Icon Documentation

It’s about 1/2 way down the page or search for setting the size of the icon . FYI - we are now updating documents for the Clarity icons.

+2
source

Source: https://habr.com/ru/post/1263213/

More articles:


All Articles