Skip to content

Commit 3425e2a

Browse files
author
Tane Morgan
committed
Add ability to specify span wrappers
1 parent d980f7e commit 3425e2a

File tree

3 files changed

+42
-20
lines changed

3 files changed

+42
-20
lines changed

‎src/index.tsx‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface Props {
1818
src: string
1919
svgClassName?: string
2020
svgStyle?: React.CSSProperties
21+
wrapper?: 'div' | 'span'
2122
}
2223

2324
interface State {
@@ -28,8 +29,8 @@ interface State {
2829
export default class ReactSVG extends React.Component<
2930
Props &
3031
React.DetailedHTMLProps<
31-
React.HTMLAttributes<HTMLDivElement>,
32-
HTMLDivElement
32+
React.HTMLAttributes<HTMLSpanElement | HTMLDivElement>,
33+
HTMLSpanElement | HTMLDivElement
3334
>,
3435
State
3536
> {
@@ -40,7 +41,8 @@ export default class ReactSVG extends React.Component<
4041
onInjected: () => undefined,
4142
renumerateIRIElements: true,
4243
svgClassName: null,
43-
svgStyle: {}
44+
svgStyle: {},
45+
wrapper: 'div'
4446
}
4547

4648
static propTypes = {
@@ -59,7 +61,8 @@ export default class ReactSVG extends React.Component<
5961
renumerateIRIElements: PropTypes.bool,
6062
src: PropTypes.string.isRequired,
6163
svgClassName: PropTypes.string,
62-
svgStyle: PropTypes.object
64+
svgStyle: PropTypes.object,
65+
wrapper: PropTypes.oneOf(['div', 'span'])
6366
}
6467

6568
initialState = {
@@ -69,35 +72,36 @@ export default class ReactSVG extends React.Component<
6972

7073
state = this.initialState
7174

72-
container: HTMLDivElement | null | undefined
75+
container?: HTMLSpanElement | HTMLDivElement | null
7376

74-
svgWrapper: HTMLDivElement | null | undefined
77+
svgWrapper?: HTMLSpanElement | HTMLDivElement | null
7578

76-
refCallback: React.Ref<HTMLDivElement> = container => {
79+
refCallback: React.Ref<HTMLSpanElement | HTMLDivElement> = container => {
7780
this.container = container
7881
}
7982

8083
renderSVG() {
8184
if (this.container instanceof Node) {
8285
const {
8386
evalScripts,
84-
onInjected,
8587
renumerateIRIElements,
8688
src,
8789
svgClassName,
8890
svgStyle
8991
} = this.props
90-
91-
const div = document.createElement('div')
92-
div.innerHTML = ReactDOMServer.renderToStaticMarkup(
93-
<div>
94-
<div className={svgClassName} data-src={src} style={svgStyle} />
95-
</div>
92+
const onInjected = this.props.onInjected!
93+
const Wrapper = this.props.wrapper!
94+
95+
const wrapper = document.createElement(Wrapper)
96+
wrapper.innerHTML = ReactDOMServer.renderToStaticMarkup(
97+
<Wrapper>
98+
<Wrapper className={svgClassName} data-src={src} style={svgStyle} />
99+
</Wrapper>
96100
)
97101

98-
this.svgWrapper = this.container.appendChild(
99-
div.firstChild as HTMLDivElement
100-
)
102+
this.svgWrapper = this.container.appendChild(wrapper.firstChild as
103+
| HTMLSpanElement
104+
| HTMLDivElement)
101105

102106
const each: OnInjected = (error, svg) => {
103107
if (error) {
@@ -110,7 +114,7 @@ export default class ReactSVG extends React.Component<
110114
isLoading: false
111115
}),
112116
() => {
113-
onInjected!(error, svg)
117+
onInjected(error, svg)
114118
}
115119
)
116120
}
@@ -160,14 +164,16 @@ export default class ReactSVG extends React.Component<
160164
src,
161165
svgClassName,
162166
svgStyle,
167+
wrapper,
163168
...rest
164169
} = this.props
170+
const Wrapper = wrapper!
165171

166172
return (
167-
<div {...rest} ref={this.refCallback}>
173+
<Wrapper {...rest} ref={this.refCallback}>
168174
{this.state.isLoading && Loading && <Loading />}
169175
{this.state.hasError && Fallback && <Fallback />}
170-
</div>
176+
</Wrapper>
171177
)
172178
}
173179
}

‎test/__snapshots__/browser.spec.tsx.snap‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`while running in a browser environment allows rendering of span wrappers 1`] = `"<span><span><svg width=\\"115\\" height=\\"26\\" viewBox=\\"0 0 115 26\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"injected-svg\\" data-src=\\"http://localhost/0a87e996-34b4-46ba-909a-70ab67b1f811.svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\"><g fill=\\"#FFF\\"><path d=\\"M36.92 13.048l3.376-.502c.78-.11 1.032-.5 1.032-.973 0-.975-.753-1.782-2.316-1.782-1.617 0-2.51 1.03-2.62 2.228l-3.293-.696c.222-2.143 2.203-4.51 5.885-4.51 4.352 0 5.97 2.45 5.97 5.206v6.736c0 .723.083 1.698.166 2.17h-3.4c-.085-.36-.14-1.113-.14-1.642-.698 1.086-2.01 2.032-4.046 2.032-2.93 0-4.713-1.976-4.713-4.12 0-2.45 1.813-3.813 4.1-4.146zm4.408 2.338v-.613l-3.096.474c-.948.14-1.702.668-1.702 1.725 0 .807.586 1.587 1.786 1.587 1.56 0 3.012-.753 3.012-3.174zM52.068 7.23h2.76v3.285h-2.76v5.733c0 1.198.557 1.587 1.618 1.587.446 0 .948-.056 1.143-.11v3.06c-.336.14-1.005.334-2.093.334-2.678 0-4.35-1.587-4.35-4.23v-6.375h-2.484V7.23h.697c1.45 0 2.12-.946 2.12-2.17V3.137h3.348V7.23M70.086 14.077c0 4.204-3.096 7.265-7.196 7.265s-7.196-3.06-7.196-7.265c0-4.23 3.096-7.265 7.196-7.265s7.196 3.035 7.196 7.265zm-3.71 0c0-2.588-1.673-3.896-3.486-3.896-1.813 0-3.486 1.31-3.486 3.897 0 2.56 1.673 3.897 3.486 3.897 1.813 0 3.486-1.308 3.486-3.897zM71.9 20.925V7.23h3.543V8.9c.754-1.336 2.51-2.06 4.017-2.06 1.868 0 3.375.808 4.072 2.283 1.088-1.67 2.538-2.283 4.352-2.283 2.538 0 4.964 1.53 4.964 5.205v8.88H89.25v-8.128c0-1.475-.725-2.588-2.427-2.588-1.59 0-2.538 1.223-2.538 2.698v8.017h-3.68v-8.128c0-1.475-.755-2.588-2.43-2.588-1.616 0-2.565 1.195-2.565 2.698v8.017H71.9M97.05.44c1.263 0 2.25 1.028 2.25 2.31a2.252 2.252 0 0 1-2.25 2.253c-1.235 0-2.25-1.03-2.25-2.254 0-1.282 1.015-2.31 2.25-2.31zm-1.81 6.79h3.648v13.695h-3.65V7.23zM104.31 14.077c0 2.478 1.618 3.87 3.514 3.87 1.897 0 2.845-1.253 3.152-2.31l3.263 1.085c-.614 2.282-2.762 4.62-6.416 4.62-4.045 0-7.224-3.06-7.224-7.265 0-4.23 3.124-7.265 7.113-7.265 3.737 0 5.857 2.31 6.443 4.62l-3.32 1.114c-.334-1.14-1.2-2.31-3.04-2.31-1.897 0-3.486 1.364-3.486 3.84\\"></path></g><path d=\\"M9.165 2.495L.655 17.45c-1.354 2.38 7.624 6.597 8.534 4.998l8.508-14.954\\" fill=\\"#4985FF\\"></path><path d=\\"M9.254 7.494l8.51 14.954c.91 1.6 9.886-2.618 8.53-4.998L17.787 2.495c-.91-1.6-9.887 2.618-8.532 5z\\" fill=\\"#8EFAFF\\"></path><path d=\\"M4.926 15c-2.71 0-2.71 9.997 0 9.997h17.018c2.71 0 2.71-9.997 0-9.997H4.926z\\" fill=\\"#FC436F\\"></path><path d=\\"M13.583 15l4.24 7.477.02.036a4.93 4.93 0 0 0 4.26 2.46 4.83 4.83 0 0 0 2.448-.666c1.577-.924 2.458-2.612 2.458-4.343v-.072c0-.023 0-.045-.002-.067v-.037a3.77 3.77 0 0 0-.024-.323c-.25-2.37-2.153-4.26-4.508-4.45a36.446 36.446 0 0 0-.39-.015h-8.5z\\" fill=\\"#FA2B61\\"></path><path d=\\"M4.924 15c-.04 0-.353.013-.375.014-2.37.19-4.273 2.08-4.524 4.45a4.535 4.535 0 0 0-.025.428c-.024 1.756.86 3.48 2.457 4.415.79.456 1.625.665 2.45.665 1.705 0 3.37-.896 4.28-2.495l4.246-7.463L4.923 15z\\" fill=\\"#4275F4\\"></path><path d=\\"M11.057.665C8.71 2.04 7.9 5.112 9.254 7.493l4.252 7.473 4.26-7.48c1.267-2.225.64-5.053-1.36-6.536A4.933 4.933 0 0 0 13.503 0c-.834 0-1.677.214-2.447.665z\\" fill=\\"#83E7FF\\"></path></svg></span></span>"`;
4+
35
exports[`while running in a browser environment should call onInjected correctly when injection is successful 1`] = `
46
<svg
57
class="injected-svg"

‎test/browser.spec.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,4 +232,18 @@ describe('while running in a browser environment', () => {
232232

233233
expect(wrapper.html()).toMatchSnapshot()
234234
})
235+
236+
it('allows rendering of span wrappers', () => {
237+
wrapper = mount(
238+
<ReactSVG
239+
src={`http://localhost/${faker.random.uuid()}.svg`}
240+
wrapper="span"
241+
/>
242+
)
243+
244+
requests[0].respond(200, {}, source)
245+
jest.runAllTimers()
246+
247+
expect(wrapper.html()).toMatchSnapshot()
248+
})
235249
})

0 commit comments

Comments
 (0)