Implementing icons - Githubissues

jennasalau commented 5 years ago

Currently rui is opinionated on icons if we look at the accordion implementation.

I believe we should have a method of doing icons that can be easily removed completely so we do not force that opinion or penalise in file size if they BYO.

I'm thinking a seperate package rui-icons that can be opt in/out easily. Or maybe we use something that already exists?

How should we approach icons for this mini library in 2019?

I believe the requirements will be:

Clear documentation/user guides on how to implement icons in rui
Our rui-icons or 3rd party solution must
- Support IE11 as min (Graceful degration ok)
- Allow on the fly colour changes (eg hover effects)
- Be critical and download only on use (ie no large file to download that contains all icons)

This looks good, but maybe ie11 just doesn't get hover effects? https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

ttaiyo commented 5 years ago

I recently started using https://github.com/gilbarbara/react-inlinesvg

It has great browser support (> IE9) and since it renders inline SVG you can easily change the hover/focus colours

saxoncameron commented 5 years ago

Hey guys - late weigh-in here, but worth mentioning I've got an approach that might suit your needs here. It's hot-off-the-press from my current project and might be another good candidate for an open source package.

In summary it's a process that autogenerates React components which are inline SVGs. Easy to style and with only some small tweaking we'd benefit from tree-shaking. Component wise the code is tiny, and adding new icons is a 'drag-and-drop' process to a folder. Icons do need to be "compiled", but if that's part of the start/build pipeline it's a small issue. Script is very quick.

I'm pressed for BD time since I'm already doing OT on my current project, and breakpoint container is still "next on my plate", but here's the code for what it's worth:

Component https://hub.deloittedigital.com.au/stash/projects/LM/repos/link-mcx---jss-fed-portal/browse/src/core/components/Icon

Icon build script https://hub.deloittedigital.com.au/stash/projects/LM/repos/link-mcx---jss-fed-portal/browse/scripts/icons/generate-icons.js

saxoncameron commented 5 years ago

This approach was inspired by: https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

and therefore makes the process pretty simple/small. This part in particular:

saxoncameron commented 5 years ago

Oh I forgot to mention; the npm script optimises/minifies with svgo, and treats each SVG for currentColor and camelCase for tags like fillRule so they're React friendly and ready-to-go

jnelssonsmith commented 5 years ago

https://codepen.io/chriscoyier/pen/bJXRwq?editors=0110

ricominten commented 5 years ago

@jnelssonsmith The above does come with some downsides for support: https://caniuse.com/#search=mask, but is otherwise really the direction I would support.

If we are going to create it as a component we absolutely need to address A11Y option (probably through some vh class) https://css-tricks.com/can-make-icon-system-accessible/

jennasalau commented 5 years ago

This was resolved in #53

DeloitteAU / rhythm-ui

Implementing icons #20