score:8
Accepted answer
if you created your svg in illustrater, save it with css properties set to presentation attributes
. this way, you won't end up with a css classes and you are able to directly alter all attributes.
i exported an svg that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- generator: adobe illustrator 21.0.2, svg export plug-in . svg version: 6.00 build 0) -->
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewbox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<rect x="15.5" y="15.5" fill="#ffffff" width="44" height="44"/>
<path d="m59,16v43h16v16h59 m60,15h15v45h45v15l60,15z"/>
</g>
<g>
<path fill="#ffffff" d="m60.5,81.5c-12.1,0-22-9.9-22-22s9.9-22,22-22s22,9.9,22,22s72.6,81.5,60.5,81.5z"/>
<path d="m60.5,38c72.4,38,82,47.6,82,59.5s72.4,81,60.5,81s39,71.4,39,59.5s48.6,38,60.5,38 m60.5,37c48.1,37,38,47.1,38,59.5
s48.1,82,60.5,82s83,71.9,83,59.5s72.9,37,60.5,37l60.5,37z"/>
</g>
</svg>
i then got rid of all unneeded markup and just used it inside my component:
const image = ( props ) => {
const {
hidesquare,
hidecircle,
} = props;
const colorsquare = props.colorsquare || '#fff';
const colorcircle = props.colorcircle || '#fff';
return (
<svg x="0px" y="0px" viewbox="0 0 100 100">
{ hidesquare ? null : (
<g>
<rect x="15.5" y="15.5" fill={ colorsquare } width="44" height="44"/>
<path d="m59,16v43h16v16h59 m60,15h15v45h45v15l60,15z"/>
</g>
) }
{ hidecircle ? null : (
<g>
<path fill={ colorcircle } d="m60.5,81.5c-12.1,0-22-9.9-22-22s9.9-22,22-22s22,9.9,22,22s72.6,81.5,60.5,81.5z"/>
<path d="m60.5,38c72.4,38,82,47.6,82,59.5s72.4,81,60.5,81s39,71.4,39,59.5s48.6,38,60.5,38 m60.5,37c48.1,37,38,47.1,38,59.5
s48.1,82,60.5,82s83,71.9,83,59.5s72.9,37,60.5,37l60.5,37z"/>
</g>
) }
</svg>
);
};
class wrapper extends react.component {
constructor( props ) {
super( props );
// set default state
this.state = {
selectedcolor: 'lightgreen',
hidesquare: false,
hidecircle: false,
};
}
// oninput callback
changecolor = ( e ) => {
this.setstate( { selectedcolor: e.target.value } );
}
changevisibility = ( e ) => {
const { name, checked } = e.target;
this.setstate( { [ name ]: checked } );
}
render() {
return (
<div>
<select oninput={ this.changecolor }>
<option>lightgreen</option>
<option>pink</option>
<option>red</option>
</select><br />
<label><input type="checkbox" name="hidesquare" onchange={ this.changevisibility } /> hidesquare</label>
<label><input type="checkbox" name="hidecircle" onchange={ this.changevisibility } /> hidecircle</label><br />
<image
hidesquare={ this.state.hidesquare }
hidecircle={ this.state.hidecircle }
colorsquare={ this.state.selectedcolor }
colorcircle={ this.state.selectedcolor }
/>
</div>
);
}
}
reactdom.render( <wrapper />, document.getelementbyid( 'app' ) );
svg {
width: 200px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
score:14
you can preserve the styles without any conversion. for that wrap all the css classes inside the style tag with {` and `}. now your svg becomes like this
<svg ...>
<defs>
<style>{`.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}`}</style>
</defs>
...
</svg>
this will render without any problem.
Source: stackoverflow.com
Related Query
- SVG in JSX - how to convert defs tag
- How to convert SVG style to JSX
- How to Convert svg link into svg tag
- How can i convert a script tag that is defined as string to a JSX object?
- How to convert a file buffer to <img> tag src?
- How to convert HTML to JSX (React.js)
- How do i dynamically create JSX tag in React using typescript?
- How to convert react JSX files to simple JavaScript file [offline transformation]
- How do I convert TSX to JSX
- reactjs semantic-ui how to correctly modify a JSX tag conditionally
- How to convert responsive PNG img HTML to SVG img in react
- how to change html script tag to jsx code?
- SVG convert <g> tag to an <image> tag containing base64 PNG URI (read more)
- How to pass a variable number of props to a JSX tag in React
- How to convert string to JSX to using in React
- How to convert custom proptype in react jsx to typescript
- how to resolve Adjacent JSX elements must be wrapped in an enclosing tag issue in React
- How to call an image in REACT jsx element tag
- How to get JSX tag attributes in functional react?
- How do I convert my codes to correct jsx format?
- How to convert a React Element from its Object form back to Tag form when printing
- How do I convert html with jsx to jsx in React.js
- How to put props.children in JSX tag
- How do I use gulp to convert all jsx files to JavaScript?
- how can I convert text to tag upon pressing enter inside textfield @mui in react
- How to convert a string into JSX in React 17
- How can I use an SVG element created with JSX as an image source in a Canvas?
- How can I convert JSX to JS without npm using a build script?
- how to use/implement input tags and custom jsx tag for syntax highlighting using Highlight.JS?
- how to convert <script> tag in react?
More Query from same tag
- Why i cant use a <hr/> tag outside another tag in ReactJS?
- Handling data from Async requests in React JS
- React Routing with URL Link as params
- Does the passport.js support ajax?
- I don't understand why my axios post request isn't working - 404 not found
- Reactjs access Object property from JSON in Child companent using props
- RowDataPacket returns empty object but it is not empty [React/Next]
- Force component to wait for redux state update
- how to set placeholder as an object in textarea element?
- Can't get attributes of material-ui SelectField in react
- Dynamically set defaultChecked with value of setState within data map with react hooks
- Problems navigating to URL like "/annotationsList/:id"
- How to limit Max Length of Draft js
- React Formik : How to useEffect with formik values?
- MobX not rerendering React component as used @computed is changed
- 'await' has no effect on the type of this expression
- ES6 with React, can't setState - 'Cannot read property 'setState' of undefined'?
- Getting warning "Warning: Each child in a list should have a unique "key" prop." when my component render
- My React 18 app does not reload automatically I try to click on the create new project button does not work unless I refresh the page manually
- Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'
- Why does my list loop into different widows in React
- Chart.js chart is not showing inside a React bootstrap modal
- React-Redux error Invalid prop `children` of type `object` supplied to `Provider`
- Display two schema fields as concatenated label in KeystoneJS
- Why do multiple instances of a component share the same state?
- React Login page getting focused on 'password' when loading the page instead of 'username'
- rerender component when my state change state in ReactJS
- React access setState in array map
- React StrictMode double initializasion - where to put logic that should be executed only once
- How to get data from url in react