Comments (8)
This codepen currently uses mask-image
. We might run into some issues since the icon set will be quite large, and has to be doubled for -webkit-mask-image
usage. Could be solved by referencing a single SVG variable with the URL as the value.
https://codepen.io/aaronshekey/pen/abNNmBa
Another interesting side effect is we'll have to add the dimensions into each icon. We generally hold to 18px by 18px, but occasionally an icon will need to be 20px wide. Additionally, we have our 14px by 14px variations.
Very interesting sidenote: These look way better in legacy edge than the direct SVG. 🤔
from stacks-icons.
I've beefed up the test cases in that Codepen to see what happens with .native
. With our directly-injected SVG, we can use our CSS variables inside SVG and they react to dark mode as expected. Unfortunately, mask-image doesn't work with native colors, so we need to switch to background-image in the .native
case.
from stacks-icons.
Adding one thing in here - 2x PNGs would be handy for emails. I was thinking we could colour in the build script perhaps orange-500
, blue-500
and black-600
.
Would be much easier to maintain using the helper in the email templates.
from stacks-icons.
This is probably a naive question, but why a png and not our svgs? Svg background-image
support is covered by our supported browsers (see MDN).
We still won't be able to style them since they're not in the DOM, but it would remove the need for another image format.
I did some brief googling and happened upon mask-image. Basically, use an svg as a mask over the element, setting background-color
to our current state (dark mode, selected). Looks like browser support is covered for us.
We could solve the pathing issues by embedding the svg itself into the less file. We can then ship this less file to be included into other projects as needed. It'll be a slightly larger hit at first request (loading every icon on the short list vs as needed), but the file will cache, so not an issue for future requests.
Of course, I haven't tested any of this so... take it with a grain of salt.
from stacks-icons.
Yeah! Makes sense to skip PNGs entirely! Lemme dig into this. There's either masking or filtering. Let's explore both!
from stacks-icons.
So, coincidentally I needed this exact type of thing for a side project I was working on last night and I worked something up that I'm actually pretty happy with. The code is short, simple and very flexible. Check the very bottom of the page where I turn a "filled" icon into an "outlined" icon just by adding a Stacks bg-*
class and a fc-*
class (and nothing else).
Knowing how you feel about font icons, I hate to say that using these feels a lot like font icons (which, to me, is a good thing). We're getting a lot of the benefits with very few of the drawbacks. I think we might be on to something with this.
https://codepen.io/bk-SO/pen/xxVVWPL
from stacks-icons.
@abovedave Good call, I never even thought about supporting for emails. I wonder how css background image support is on that end
from stacks-icons.
I also have a hunch that if this alternate method is truly about performance both in rendering and page weight, pngs might be the way to go. There are a ton of scripts out there that can take a directory of SVG and turn them into sprite sheets.
We can go that method for super-tuned Core experiences, and then we can go pre-baked @2x
spots for email methods. So much to hack on here. Yowza!
from stacks-icons.
Related Issues (20)
- Update Enterprise logo. Add Teams, Talent, Engagement HOT 3
- Export PNG versions of the icon set
- SVG Files are missing XMLNS, thus failing to load HOT 1
- Add an icon for Discord HOT 2
- TrashSm
- Generated ESM module is missing the Icons and Spots namespaces HOT 3
- More editor-related icons
- Figma integration
- Support a wider range of emotions
- New icon: download HOT 3
- Define a richer aesthetic
- @Svg.Tada isn't fully greyscale HOT 1
- New icon: Jira HOT 1
- Add a preview of the final icon output
- Add diff icons
- Conflicting gradient IDs are causing strange coloring
- Guide for usage in Markdown HOT 1
- Deliver as a nuget package
- Add an icon for columns HOT 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 stacks-icons.