Comments (5)
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
from iconmeister.github.io.
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
...from iconmeister.github.io.
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;
}
from iconmeister.github.io.
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?
from iconmeister.github.io.
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/
from iconmeister.github.io.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iconmeister.github.io.