Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Behavior different then docs #1

Open
chisholmd opened this issue Dec 1, 2020 · 5 comments
Open

Behavior different then docs #1

chisholmd opened this issue Dec 1, 2020 · 5 comments

Comments

@chisholmd
Copy link

chisholmd commented Dec 1, 2020

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
Copy link
Contributor

Danny-Engelman commented Dec 1, 2020

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
Copy link
Author

chisholmd commented Dec 1, 2020

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
Copy link
Contributor

Danny-Engelman commented Dec 2, 2020

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

image

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
Copy link
Author

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
Copy link
Contributor

Danny-Engelman commented Dec 2, 2020

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants