feat: add icon visual size and stroke width custom CSS properties (#10160)

Co-authored-by: web-padawan <[email protected]>

Author: jouni

packages/icon/src/styles/vaadin-icon-base-styles.js

@@ -22,7 +22,7 @@ export const iconStyles = css`
   :host::after,
   :host::before {
     line-height: 1;
-    font-size: 100cqh;
+    font-size: var(--vaadin-icon-visual-size, 100cqh);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     -moz-osx-font-smoothing: grayscale;
@@ -34,10 +34,14 @@ export const iconStyles = css`
 
   svg {
     display: block;
-    width: 100%;
-    height: 100%;
+    width: var(--vaadin-icon-visual-size, 100%);
+    height: var(--vaadin-icon-visual-size, 100%);
     /* prevent overflowing icon from clipping, see https://github.com/vaadin/flow-components/issues/5872 */
     overflow: visible;
+
+    @container style(--vaadin-icon-stroke-width) {
+      stroke-width: var(--vaadin-icon-stroke-width);
+    }
   }
 
   :host(:is([icon-class], [font-icon-content])) svg {

packages/icon/src/vaadin-icon.d.ts

@@ -48,6 +48,14 @@ import { IconMixin } from './vaadin-icon-mixin.js';
  *
  * ### Styling
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property          | Description
+ * -----------------------------|-------------
+ * `--vaadin-icon-size`         | Size (width and height) of the icon
+ * `--vaadin-icon-stroke-width` | Stroke width of the SVG icon
+ * `--vaadin-icon-visual-size`  | Visual size of the icon
+ *
  * The following state attributes are available for styling:
  *
  * Attribute      | Description

packages/icon/src/vaadin-icon.js

@@ -56,6 +56,14 @@ import { ensureSvgLiteral } from './vaadin-icon-svg.js';
  *
  * ### Styling
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property          | Description
+ * -----------------------------|-------------
+ * `--vaadin-icon-size`         | Size (width and height) of the icon
+ * `--vaadin-icon-stroke-width` | Stroke width of the SVG icon
+ * `--vaadin-icon-visual-size`  | Visual size of the icon
+ *
  * The following state attributes are available for styling:
  *
  * Attribute      | Description

packages/icon/test/visual/base/screenshots/icon/baseline/font-icons-visual-size.png

@@ -1,5 +1,6 @@
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import { Iconset } from '../../vaadin-iconset.js';
 import { iconFontCss } from '../test-icon-font.js';
 
 describe('icon', () => {
@@ -49,5 +50,51 @@ describe('icon', () => {
     it('font icons', async () => {
       await visualDiff(div, 'font-icons');
     });
+
+    it('font icons visual size', async () => {
+      div.style.setProperty('--vaadin-icon-visual-size', '24px');
+      await visualDiff(div, 'font-icons-visual-size');
+    });
+  });
+
+  describe('svg icon', () => {
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <svg viewBox="0 0 24 24">
+        <defs>
+          <g id="lucide:layers" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+            <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+            <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+          </g>
+        </defs>
+      </svg>
+    `;
+
+    Iconset.register('lucide', 24, template);
+
+    beforeEach(async () => {
+      fixtureSync(`<vaadin-icon icon="lucide:layers"></vaadin-icon>`, div);
+      await nextFrame();
+    });
+
+    it('svg icon', async () => {
+      await visualDiff(div, 'svg-icon');
+    });
+
+    it('svg icon size', async () => {
+      div.style.setProperty('--vaadin-icon-size', '32px');
+      await visualDiff(div, 'svg-icon-size');
+    });
+
+    it('svg icon visual size', async () => {
+      div.style.setProperty('--vaadin-icon-visual-size', '32px');
+      await visualDiff(div, 'svg-icon-visual-size');
+    });
+
+    it('svg icon stroke width', async () => {
+      div.style.setProperty('--vaadin-icon-stroke-width', '2px');
+      await visualDiff(div, 'svg-icon-stroke-width');
+    });
   });
 });