Icons test #1466
Icons test #1466
Conversation
Codecov Report
@@ Coverage Diff @@
## master #1466 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 96 97 +1
Lines 1703 1604 -99
Branches 477 452 -25
=========================================
- Hits 1703 1604 -99 see 14 files with indirect coverage changes Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. |
|
Kudos, SonarCloud Quality Gate passed!
|
renrizzolo
force-pushed
the
icons-test
branch
from
8d95827
to
a6876e0
Compare
|
Kudos, SonarCloud Quality Gate passed!
|
|
Kudos, SonarCloud Quality Gate passed!
|
| "generate-icon-names": "node icons/src/generateIconNames.js", | ||
| "convert-icons": "npm run clean-icons && npx @svgr/cli --out-dir icons/src/react --ext=jsx --template=icons/template.js --expand-props=none --svg-props width={size} --svg-props height={size} --replace-attr-values=#5a5a5a={color},#333={color},currentColor={color} -- icons/src/svg && npm run generate-icon-names", |
There was a problem hiding this comment.
This is the main transformation script.
We don't need the generate-icon-names script if we choose to not use the <Icon name="..."/> component.
The main thing to note here is
--replace-attr-values=#5a5a5a={color}
if all the source svgs have the same fill colour (e.g #5a5a5a), we can use this to replace the fill with currentColor string or a {color} prop.
the template.js file has the markup for the props etc.
Description
This PR is for testing only, to make cleaning up existing icon svgs easier. Icons won't necessarily be in this repo.
icons/src/svgare converted to react componentscurrentColor(currently as color prop that would be overridable; tbd)sizeprop that maps to svg width and heightsvg-icondefault className andclassNamepropThese could be used directly:
or
These would be used like this:
not sure of the best API here, but a few things to consider/investigate