Last active
November 22, 2018 13:14
-
-
Save jpescada/a5aeb228e6ccfbe607e99fc38985ba0e to your computer and use it in GitHub Desktop.
React Component to generate an SVG with dynamic content (text, colour and image)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| // NB: This is demo code just to explain the logic | |
| const DynamicSVG = (props) => { | |
| static defaultProps = { | |
| text: 'This is the default text', | |
| colour: '#FF0000', | |
| image: '/static/images/default.png', | |
| showCircle: true | |
| }; | |
| return ( | |
| <svg | |
| width={200} | |
| height={100} | |
| className="svg-element"> | |
| <text | |
| fontFamily="Arial, sans-serif" | |
| fontSize={16} | |
| fill={this.props.colour === '#FF0000' ? '#000' : '#FFF'}> | |
| <tspan> | |
| {this.props.text} | |
| </tspan> | |
| </text> | |
| <image | |
| x={0} | |
| y={0} | |
| width={100} | |
| height={100} | |
| xlinkHref={this.props.image} /> | |
| {this.props.showCircle && | |
| <circle | |
| fill={this.props.colour} | |
| fillRule="nonzero" | |
| cx={0} | |
| cy={0} | |
| r={5} /> | |
| } | |
| </svg> | |
| ); | |
| }; | |
| export default DynamicSVG; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment