Behavior different then docs

[chisholmd]

Hi, Thanks for providing this, I find it very useful. Just want to share some experiences. I have confirmed the below on your jsFiddle

1. When I follow the example and use w=16 h=16 I get a full sized icon. It only seems to work if I user w='16px' h='16px' but even then it only effects the icon not the rectangle (eg big white space)

2. I tried using CSS,but it didn't work. I tried both
   .icon{
   --svg-icon-w: 16px;
   --svg-icon-h: 16px;
   and
   --svg-icon-width: 16px;
   --svg-icon-height: 16px;
   }

Actually I have not been able to set any properties with CSS.

I am using svg-icon in a native web-component environment with lit-html for rendering templates.

[Danny-Engelman]

I forked the fiddle: https://jsfiddle.net/Qomponents/rvaj9n14/
and added -w and -h without px notation, works for me

Lit... I loath it,
Like React it does its own virtual-DOM thing.

IconMeister uses standard JS getProperty code, so if CSS config doesn't work it is most likely because the DOM isn't ready yet.

If you can create an example on https://webcomponents.dev (it has a Lit starter) I can see what happens

[chisholmd]

In your fiddle take one of the icons out of the icon-toolbar and see what I mean. The css is applied to svg-icon so the w and h should just work right

...

[Danny-Engelman]

See: https://jsfiddle.net/Qomponents/rvaj9n14/

Every icon has its own viewBox definition, in the iconstring defined with: "box:9;..." for a viewBox="0 0 9 9" on the SVG

A CSS definition

  svg-icon {
    --svg-icon-w: 22;
    --svg-icon-h: 22;
  }

overrules this, and sets a viewBox(0 0 22 22) on every <svg-icon> (see screenshot above)

• Icons "menu" and "bold" defined with smaller viewBox now appear smaller (upper left is still 0 0)
• Icons "settings" and "pointright" defined with larger viewBox now appear larger (upper left is still 0 0)
• Icon "refresh" has a 22 viewBox by default, so is unchanged

You can't do 22px notation in a SVG viewBox, it expects Numbers (I think it defaults to viewBox(0 0 100 100) then)

Altering viewBox width/height is for advanced users.

Icon width

See: https://jsfiddle.net/Qomponents/rvaj9n14/

The icon width is calculated by the CSS Grid, it rounds grid cells to whole numbers.

Icons by default take 100% of the container element width.

To set a width/height use regular CSS:

  svg-icon[is="menu"] {
    width: 80px;
    height: 80px;
  }

[chisholmd]

Thanks, that is very helpful. Although, If I load your fiddle and remove the icon-toolbar tags and hit run, all the icons blow up to really big size. They seem to ignore the sizing from css. I can't figure out what they are inheriting from icon-toolbar css that makes the difference. Do you get that same behavior?

[Danny-Engelman]

Yes, that is CSS at "its best"

if you remove the container, icons will still take up 100% if the first parent container block element;
that, now, is BODY, thus icons take up 100% BODY width

You can make <svg-icon> a block element by setting the display property to block or inline-block

(I added the CSS property --size; it is standard CSS syntax, has nothing to do with IconMeister)

<style>
  svg-icon {
    display: inline-block; /*  with block the element will behave like a DIV */
    background: grey;
    --size: 60px;
    width: var(--size);
    height: var(--size);
  }
</style>

<svg-icon is="menu"></svg-icon>
<svg-icon is="settings"></svg-icon>
<svg-icon is="refresh" fill=blue></svg-icon>
<svg-icon is="bold" stroke=green></svg-icon>
<svg-icon is="pointright" rotate=90></svg-icon>

There are always different solutions: https://www.impressivewebs.com/width-100-percent-css/