LUN-356: Refactoring SVG Icons in different colors

[jira-to-github-migrator[bot]]

f1sh1918 - 24.5.2022, 13:57:19

Currently we are using multiple svg files for icons that just differ in color f.e:

import CheckCircleIconGreen from './check-circle-icon-green.svg'
import CheckCircleIconWhite from './check-circle-icon-white.svg' 

CSS enables you to use the "currentColor" Attribute to set the fill-color of a svg. So you can use the css color attribute to adjust the color you want to use instead of setting it fixed in the svg file.

Example:

<g fill="currentColor">
const BookIconGrey = styled(BookIcon) `
color: grey;

Acceptance Criteria

• remove duplicated svgs
• adjust the fill color to "currentColor" in the svg files
• set the color style you need with styled components for each usage of the icon

Environment: - Linked issues:

See how this was done in integreat: https://github.com/digitalfabrik/integreat-app/pull/2378

[jira-to-github-migrator[bot]]

Charlotte Paludo - 27.9.2022, 08:26:00

Proposed solution: svgr provides the option to override colors:

<ExampleSvgIcon fill="#333" stroke="#abc" />

This works by mapping specific color codes to variable names, e.g. svgr can be configured to always replace the color #001 inside a svg file with whatever color is passed to the icon via the fill variable.

Current problems:

• no coherent color palette which the suggested solution could work with
• inconsistent duplicates: various duplicate SVGs differ not only in color but also in (e.g.) line thickness. The suggested solution does not eliminate these kinds of duplicates.

Suggestions:

• Design Team and App Team should agree upon a palette of reserved colors (e.g. #001 through #005)
• always apply palette to icons before export from Figma/Zeplin
• configure svgr to replace reserved colors

[IsabellaTG]

@f1sh1918 @charludo Is a color palette still needed? The current used color palette in the Figma concepts was already created by Nikola or is this issue about an updated color palette request?

https://www.figma.com/file/4bW33nU6zZ6ySeTqrM37Jq/Lunes_Master?type=design&node-id=0%3A544&mode=design&t=85ALRR2wnJKYQ8HT-1

[sarahsporck]

I guess the color palett was not prominent enough @f1sh1918 . Do you still need more design input here?

[f1sh1918]

I guess the color palett was not prominent enough @f1sh1918 . Do you still need more design input here?

No idea. My base ticket Was just about not duplicating svgs that just differ in color.

As now it seems quite complicated, i wouldnt put more effort in it