Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[react-emotion] Not support svg props #357

Closed
b2whats opened this issue Sep 29, 2017 · 1 comment · Fixed by #465
Closed

[react-emotion] Not support svg props #357

b2whats opened this issue Sep 29, 2017 · 1 comment · Fixed by #465

Comments

@b2whats
Copy link

b2whats commented Sep 29, 2017

  • emotion version: 7.3.2
  • react version: 16

Relevant code.

const Svg = styled('svg')`
...
`

const SvgBox = ({ viewBox, ...props }) => (
  <Svg viewBox={viewBox}>
    {children}
  </Svg>
)

Problem description:
Svg arguments do not fall within the white list of the available properties of the element

Suggested solution:
expand properties https://github.com/emotion-js/emotion/blob/master/packages/react-emotion/src/props.js

@markphilpot
Copy link

Also xmlns, version and others: https://www.w3.org/TR/SVG/struct.html#SVGElement

sleepycat added a commit to sleepycat/emotion that referenced this issue Nov 10, 2017
SVG attributes like "d" would not be passed to components, making SVG
elements not render correctly (or at all). This commit adds SVG
attributes as described on MDN
(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) to the
whitelist that are passed down to wrapped components.

closes emotion-js#357
@sleepycat sleepycat mentioned this issue Nov 17, 2017
3 tasks
tkh44 pushed a commit that referenced this issue Nov 21, 2017
* Add SVG attributes to whitelist

SVG attributes like "d" would not be passed to components, making SVG
elements not render correctly (or at all). This commit adds SVG
attributes as described on MDN
(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) to the
whitelist that are passed down to wrapped components.

closes #357

* Clean up duplicate properties and extra commas

* Add tests to ensure SVG attributes aren't filtered

* Updated snapshots

* Add more props from react list

* Fix linting

* Remove import from ./src

* Increase bundlesize

* Update snapshots to allow additional SVG attrs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants