This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
fix(Icon): Redline matching sizing and spacing of icons in Teams theme #386
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Update
We've decided to reprocess the Teams SVGs to remove the bounding box. That will change my approach above. Stay tuned as this is on hold until we can process & upload the Teams SVGs
Icons for Teams
For Teams, all icons have a baked in padding. For an icon with a default size the bounding box (viewBox) is 32x32px with a 16x16px icon size.
To get an icon font and Teams SVG assets to line up and be able to work together, we need to add in padding for the font icon.
In addition, if there shouldn't be any visible space, the icon needs to be able to "remove" its bounding box. For this, I have updated the Map to include 2 numbers, the bounding box size and the icon size. I can use this to calculate paddings/spacings in the styles.
By default the icon will show without any space (at least for now since that is what all the other components expect of the icon). However, in order to keep the "pure" SVG, which means to show it with its baked in space (the bounding box), I added
all
as a new option to thexSpacing
prop. So now we can easily line up a row of icons like thisWith code like this