feat(image): add hexagon as an image shape #564
Merged
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.
Describe the problem this PR addresses
Add hexagon as an image
shape
optionDescribe the changes in this PR
clip-path
with an inline svgOther information
clip-path
css property only works with a specific id onclipPath
which made referencing the file difficult. Documentation suggests that this can be done withclip-path: url(hexagon.svg#hexPath)
, but I was not able to get this to work in the same way we would referencebackground-image: url(./hexagon.svg)
. I could only get this to work if the referenced svg was visible in the DOM without being conditionally rendered. Referencing svg via file path would also have to add additional webpack loaders.I also considered appending an svg to the DOM if one is not present, but that didn't quite seem best practice.
Open to suggestions here