icons.css

[argyleink]

while you can put svg into a string, you can't really provide an api into setting colors n stuff. tho maybe we can get creative? icons as props would be nice.

[equinusocio]

@argyleink Just did a poc by using mask-images:
https://codepen.io/equinusocio/pen/QWqVOVm?editors=1100

[argyleink]

what do you think of using the api of icones to allow all of the icones aggregated icons?
https://codepen.io/argyleink/pen/yLzRXYX

:root {
  --icon-skull: url("https://api.iconify.design/whh:skull.svg") center / contain no-repeat;
  --icon-dots: url("https://api.iconify.design/mdi:ferris-wheel.svg") center / contain no-repeat;
  --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;
}

then using the mask shorthand:

[name="cloud"] {
  mask: var(--icon-cloud);
  background: var(--gradient-1);
  animation: var(--animation-float);
}

are there build tools / css plugins that fetch those CSS remote urls and embed them? that's be sweet if during dev you could use the url and play around, while a prod build inlined them so the css file didnt come with dependencies.

[argyleink]

https://github.com/TrySound/postcss-inline-svg could work. i havent tested if it supports remote urls yet

[argyleink]

i'm still not 100% sure what the best way forward is. my gut says follow your initial demo, where the prop value contains everything needed, no remote svg. but has a big byte weight and icon selection tradeoff, and jit props can only mitigate the weight. what are your thoughts?

[alolalo]

Hi peeps!

I'm joining in on the discussion after having a chat with Adam on Twitter, wanting to do some SVG design for OP, and am jump-starting that right of the bat here!

So I'm just Guus, the tiniest dutch design system agency packaged inside a human body! And I love making "Dutch" design systems, tiny ones that create a BIG bang!

I read some specs you guys were considering and taking them in into my ideation process;

1. Ideally the icons are flat design, made to be masked with gradients, but also multi-colored if possible
2. Ideally the icons are placed on a CDN for easy access & storage, but also as a variables-only API
3. Ideally the icons have a one way of working described by "mask, background, animation"

From what i read you guys are way ahead in the DX of things here, so I'm not going to barge and enter. But I'm more process-driven and the way that is talked about how to handle this as an icon-system as a design system, versus the usecase of icons for OpenProps itself (website, etc...).

In short, I think there should be a healthy seperation of concern wether you're talking about the surface design of the SVG-icon system (UX), or the system design of the SVG-icon system (DX). If one must come first, I would say "eat your own shit" and make some icons you actually use yourself.

With this I just want to separate the fact what icons you would use for OpenProps, and what you would use for the framework side of the design system. That's for the end-users, but the first one is for yourself. That doesn't have to be a weighted and heavy discussion, but it's easy to mix them up.

i'm still not 100% sure what the best way forward is. my gut says follow your initial demo, where the prop value contains everything needed, no remote svg. but has a big byte weight and icon selection tradeoff, and jit props can only mitigate the weight. what are your thoughts?

Personally I already had a hunch to separate the presentation of theming SVG's in OpenProps, and how the mark-up works in your CSS system. I personally use a MVC variant that I rebranded to "Model, View, Layout" to create a data-drive approach to styling concurrent patterns in your mark-up, not your style-up (classes).

This is not to say I have a better idea, I think that SVG's might need their own approach due to the way end-users might use them. I think by applying that to your own website first you get a good feel for that, no?

If I'm following your requirements/wishes and the specs that Adam uses, you might want to consider using data-attributes for stuff like weights, sizes, themes, etc. All the information that you want to fetch for presentation in a utility-based approach that would look like this using MVL;

<svg data-model="icon skull icon--1" data-view="theme--light masked duotone outline" data-layout="size--xs">

So data for surface design, props for system design

Having only masked versions of icons has it's advantages, but so too does a duo-tone style. It depends on the end-user and what they need. Any thoughts on this approach and my seperation of DX and UX?

This is a giant tool where you can find icon sets: https://icones.js.org/

There are many many valid icon sets. I think the specs to follow are:

• Well sized: icons must be designed with the same frame size and grid
• Visually balanced and readable also at small sizes
• More icons the better
• More styles the better (?) if multi-style icons are a thing
• SVG source

I like to keep it simple for starters; I think when you don't know what code you need to write, you need to get out of a code editor to begin with or you would have had to answer to write out in code to begin with.

I would love to start a Figma file and take it from there using all the specs and requirements, make some screenshots of the website and mock some things up, so all can fork and fix what they need?

[argyleink]

sure, hit up figma or codepen with more of these thoughts 🙂
things become so much clearer when there's a demo to talk about 👍🏻