So In React I'm trying to display the userQuizes but when I iterate the array object, the values are not printed and show as blank, and nothing is printed.
Here is the Array-Object:
Here is the array with one object only, that I want to iterate
And here is the code:
{
userQuizes === null ? 'loading' :
userQuizes.map(current => {
<div className={styles.your_quiz}>
<div className={styles.your_quiz_wrapper}>
<img src={your1} alt="Blog" className={styles.your_quiz_thumb} />
<div className={styles.your_quiz_info}>
<p className={styles.quiz_title}>
{current.title}
</p>
<p className={styles.quiz_description}>
{current.description}
</p>
</div>
</div>
<div>
<div className={styles.edit}>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.44781 14.0001C9.44781 16.489 11.4852 18.514 14.0007 18.514C16.5047 18.514 18.5421 16.489 18.5421 14.0001C18.5421 11.4999 16.5047 9.47483 14.0007 9.47483C11.4852 9.47483 9.44781 11.4999 9.44781 14.0001ZM20.6933 7.05382C22.6852 8.5924 24.3811 10.8437 25.599 13.6607C25.6901 13.8756 25.6901 14.1245 25.599 14.3282C23.1633 19.9621 18.8267 23.3334 14.0007 23.3334H13.9893C9.17464 23.3334 4.83805 19.9621 2.40228 14.3282C2.31122 14.1245 2.31122 13.8756 2.40228 13.6607C4.83805 8.02675 9.17464 4.66675 13.9893 4.66675H14.0007C16.4137 4.66675 18.7015 5.50392 20.6933 7.05382ZM14.002 16.8146C15.5614 16.8146 16.8362 15.5475 16.8362 13.9976C16.8362 12.4364 15.5614 11.1693 14.002 11.1693C13.8654 11.1693 13.7288 11.1806 13.6036 11.2032C13.5581 12.4477 12.5337 13.4432 11.2703 13.4432H11.2134C11.1793 13.6243 11.1565 13.8053 11.1565 13.9976C11.1565 15.5475 12.4313 16.8146 14.002 16.8146Z" fill="#5928E5" />
</svg>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9391 23.3659L21.1899 10.1097C21.747 9.39482 21.9451 8.56835 21.7594 7.72682C21.5985 6.9618 21.128 6.2344 20.4223 5.68258L18.7015 4.31557C17.2035 3.12415 15.3465 3.24956 14.2818 4.61657L13.1304 6.11024C12.9819 6.29711 13.019 6.57302 13.2047 6.72351C13.2047 6.72351 16.114 9.0562 16.1759 9.10637C16.374 9.29449 16.5226 9.54532 16.5597 9.84631C16.6216 10.4358 16.2131 10.9876 15.6065 11.0628C15.3217 11.1004 15.0493 11.0127 14.8513 10.8496L11.7934 8.4166C11.6448 8.30498 11.422 8.32881 11.2982 8.4793L4.03099 17.8853C3.56055 18.4748 3.39961 19.2398 3.56055 19.9797L4.48906 24.0055C4.53858 24.2187 4.72428 24.3692 4.94713 24.3692L9.03258 24.319C9.77539 24.3065 10.4687 23.9679 10.9391 23.3659ZM16.6596 22.1121H23.3214C23.9714 22.1121 24.5 22.6476 24.5 23.3061C24.5 23.9657 23.9714 24.5 23.3214 24.5H16.6596C16.0097 24.5 15.481 23.9657 15.481 23.3061C15.481 22.6476 16.0097 22.1121 16.6596 22.1121Z" fill="#5928E5" />
</svg>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6683 6.11671C24.1222 6.11671 24.5 6.49354 24.5 6.97304V7.41637C24.5 7.8842 24.1222 8.27269 23.6683 8.27269H4.33283C3.87784 8.27269 3.5 7.8842 3.5 7.41637V6.97304C3.5 6.49354 3.87784 6.11671 4.33283 6.11671H7.73449C8.42549 6.11671 9.02685 5.62555 9.1823 4.93256L9.36044 4.1369C9.63729 3.05308 10.5484 2.33325 11.5911 2.33325H16.4088C17.4402 2.33325 18.3616 3.05308 18.6282 4.07973L18.8188 4.93139C18.9731 5.62555 19.5745 6.11671 20.2666 6.11671H23.6683ZM21.9401 22.323C22.2953 19.0132 22.9171 11.1499 22.9171 11.0706C22.9398 10.8302 22.8615 10.6027 22.706 10.4196C22.5392 10.2481 22.3282 10.1466 22.0956 10.1466H5.91328C5.67954 10.1466 5.45715 10.2481 5.30284 10.4196C5.14626 10.6027 5.0691 10.8302 5.08045 11.0706C5.08253 11.0851 5.10484 11.3621 5.14214 11.8252C5.30785 13.8823 5.76936 19.6118 6.06759 22.323C6.27863 24.3203 7.58915 25.5756 9.48741 25.6211C10.9522 25.6549 12.4613 25.6666 14.0044 25.6666C15.4579 25.6666 16.9341 25.6549 18.4443 25.6211C20.4084 25.5873 21.7177 24.3541 21.9401 22.323Z" fill="#5928E5" />
</svg>
</div>
</div>
</div>
}
)
}
And here is the page that is not showing anything:
here is blank
Use return statement
{
userQuizes === null ? 'loading' :
userQuizes.map(current => {
return <div className={styles.your_quiz}>
<div className={styles.your_quiz_wrapper}>
<img src={your1} alt="Blog" className={styles.your_quiz_thumb} />
<div className={styles.your_quiz_info}>
<p className={styles.quiz_title}>
{current.title}
</p>
<p className={styles.quiz_description}>
{current.description}
</p>
</div>
</div>
<div>
<div className={styles.edit}>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.44781 14.0001C9.44781 16.489 11.4852 18.514 14.0007 18.514C16.5047 18.514 18.5421 16.489 18.5421 14.0001C18.5421 11.4999 16.5047 9.47483 14.0007 9.47483C11.4852 9.47483 9.44781 11.4999 9.44781 14.0001ZM20.6933 7.05382C22.6852 8.5924 24.3811 10.8437 25.599 13.6607C25.6901 13.8756 25.6901 14.1245 25.599 14.3282C23.1633 19.9621 18.8267 23.3334 14.0007 23.3334H13.9893C9.17464 23.3334 4.83805 19.9621 2.40228 14.3282C2.31122 14.1245 2.31122 13.8756 2.40228 13.6607C4.83805 8.02675 9.17464 4.66675 13.9893 4.66675H14.0007C16.4137 4.66675 18.7015 5.50392 20.6933 7.05382ZM14.002 16.8146C15.5614 16.8146 16.8362 15.5475 16.8362 13.9976C16.8362 12.4364 15.5614 11.1693 14.002 11.1693C13.8654 11.1693 13.7288 11.1806 13.6036 11.2032C13.5581 12.4477 12.5337 13.4432 11.2703 13.4432H11.2134C11.1793 13.6243 11.1565 13.8053 11.1565 13.9976C11.1565 15.5475 12.4313 16.8146 14.002 16.8146Z" fill="#5928E5" />
</svg>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9391 23.3659L21.1899 10.1097C21.747 9.39482 21.9451 8.56835 21.7594 7.72682C21.5985 6.9618 21.128 6.2344 20.4223 5.68258L18.7015 4.31557C17.2035 3.12415 15.3465 3.24956 14.2818 4.61657L13.1304 6.11024C12.9819 6.29711 13.019 6.57302 13.2047 6.72351C13.2047 6.72351 16.114 9.0562 16.1759 9.10637C16.374 9.29449 16.5226 9.54532 16.5597 9.84631C16.6216 10.4358 16.2131 10.9876 15.6065 11.0628C15.3217 11.1004 15.0493 11.0127 14.8513 10.8496L11.7934 8.4166C11.6448 8.30498 11.422 8.32881 11.2982 8.4793L4.03099 17.8853C3.56055 18.4748 3.39961 19.2398 3.56055 19.9797L4.48906 24.0055C4.53858 24.2187 4.72428 24.3692 4.94713 24.3692L9.03258 24.319C9.77539 24.3065 10.4687 23.9679 10.9391 23.3659ZM16.6596 22.1121H23.3214C23.9714 22.1121 24.5 22.6476 24.5 23.3061C24.5 23.9657 23.9714 24.5 23.3214 24.5H16.6596C16.0097 24.5 15.481 23.9657 15.481 23.3061C15.481 22.6476 16.0097 22.1121 16.6596 22.1121Z" fill="#5928E5" />
</svg>
<svg className={styles.edit_icon} viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6683 6.11671C24.1222 6.11671 24.5 6.49354 24.5 6.97304V7.41637C24.5 7.8842 24.1222 8.27269 23.6683 8.27269H4.33283C3.87784 8.27269 3.5 7.8842 3.5 7.41637V6.97304C3.5 6.49354 3.87784 6.11671 4.33283 6.11671H7.73449C8.42549 6.11671 9.02685 5.62555 9.1823 4.93256L9.36044 4.1369C9.63729 3.05308 10.5484 2.33325 11.5911 2.33325H16.4088C17.4402 2.33325 18.3616 3.05308 18.6282 4.07973L18.8188 4.93139C18.9731 5.62555 19.5745 6.11671 20.2666 6.11671H23.6683ZM21.9401 22.323C22.2953 19.0132 22.9171 11.1499 22.9171 11.0706C22.9398 10.8302 22.8615 10.6027 22.706 10.4196C22.5392 10.2481 22.3282 10.1466 22.0956 10.1466H5.91328C5.67954 10.1466 5.45715 10.2481 5.30284 10.4196C5.14626 10.6027 5.0691 10.8302 5.08045 11.0706C5.08253 11.0851 5.10484 11.3621 5.14214 11.8252C5.30785 13.8823 5.76936 19.6118 6.06759 22.323C6.27863 24.3203 7.58915 25.5756 9.48741 25.6211C10.9522 25.6549 12.4613 25.6666 14.0044 25.6666C15.4579 25.6666 16.9341 25.6549 18.4443 25.6211C20.4084 25.5873 21.7177 24.3541 21.9401 22.323Z" fill="#5928E5" />
</svg>
</div>
</div>
</div>
}
)
}
Related
I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.
SVG code
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 85 85"
style="enable-background:new 0 0 85 85;"
xml:space="preserve"
>
<polygon
class="st0"
points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
fill="#FFF"
/>
<g>
<g transform="translate(4.988 -113.385)">
<path
d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
fill="#D4B830"
/>
<path
d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0"
enable-background="new"
/>
<path
d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
fill="#EBEBEB"
opacity="0.986"
fill-opacity="0.9216"
enable-background="new"
/>
<path
d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
fill="#FDD83C"
/>
</g>
</g>
</svg>
You've no text in the file so just remove the xml:space attribute altogether.
In svg file have this svg:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 2H19.5522C20.9037 2 22.0001 3.1059 22.0001 4.47018V7.7641C22.0001 9.12735 20.9037 10.2343 19.5522 10.2343H16.2856C14.933 10.2343 13.8367 9.12735 13.8367 7.7641V4.47018C13.8367 3.1059 14.933 2 16.2856 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 2H7.71449C9.06703 2 10.1634 3.1059 10.1634 4.47018V7.7641C10.1634 9.12735 9.06703 10.2343 7.71449 10.2343H4.44892C3.09638 10.2343 2 9.12735 2 7.7641V4.47018C2 3.1059 3.09638 2 4.44892 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 13.7657H7.71449C9.06703 13.7657 10.1634 14.8716 10.1634 16.2369V19.5298C10.1634 20.8941 9.06703 22 7.71449 22H4.44892C3.09638 22 2 20.8941 2 19.5298V16.2369C2 14.8716 3.09638 13.7657 4.44892 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 13.7657H19.5522C20.9037 13.7657 22.0001 14.8716 22.0001 16.2369V19.5298C22.0001 20.8941 20.9037 22 19.5522 22H16.2856C14.933 22 13.8367 20.8941 13.8367 19.5298V16.2369C13.8367 14.8716 14.933 13.7657 16.2856 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
I am importing it like this:
import { ReactComponent as Icon } from 'assets/icons/icon.svg';
And use it just like this:
<Icon title="icon title"/>
Can I somehow customize this title? I mean change color, background ...
You can provide props into the SVG tag itself, you can see all the tags you can use on SVG tag here.
So, to change the color on the SVG, you'd pass "fill" to "red". Here's a sandbox example of it.
In vue I can duplicate one svg file several times like v-for="i in 5":key="i". How can I do it in React?
<svg v-for="i in 5":key="i" width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
<title>Star</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Profile-nav" transform="translate(-11.000000, -4.000000)" fill="#F8E71C" stroke="none" stroke-width="2">
<g id="Group-2" transform="translate(0.000000, -1.000000)">
<polygon id="Star" points="29 32.8753882 19.595436 38 21.3915479 27.145898 13.7830957 19.4589803 24.297718 17.8753882 29 8 33.702282 17.8753882 44.2169043 19.4589803 36.6084521 27.145898 38.404564 38"></polygon>
</g>
</g>
</g>
</svg>
You'd do it in a very similar way to how you'd create an array in JavaScript. One option would be to use Array.from with a length, and use the second parameter in the mapper function for the index, eg:
Array.from({ length: 5 }, (_, i) => (
<svg key={i}>
// ...
</svg>
));
const App = () => (
Array.from({ length: 5 }, (_, i) => (
<svg key={i} width="36px" height="35px" viewBox="0 0 36 35" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>Star</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Profile-nav" transform="translate(-11.000000, -4.000000)" fill="#F8E71C" stroke="none" stroke-width="2">
<g id="Group-2" transform="translate(0.000000, -1.000000)">
<polygon id="Star" points="29 32.8753882 19.595436 38 21.3915479 27.145898 13.7830957 19.4589803 24.297718 17.8753882 29 8 33.702282 17.8753882 44.2169043 19.4589803 36.6084521 27.145898 38.404564 38"></polygon>
</g>
</g>
</g>
</svg>
))
);
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div class='react'></div>
You could do it using `
[...Array(5)].map((_,i)=>{
return <svg key={i} ...>
...
</svg>
})
and replace kebab-case attributes by camelCase ones :
stroke-width ---> strokeWidth
fill-rule ---> fillRule
This React Component show SVG in Firefox but not in Chrome. What's wrong here?
In FireFOx it works responsibly but in Chrome it not even show
return (
<div className="map">
<svg viewBox="0 0 531 724" version="1.1" x="0px" y="0px">
<defs>
</defs>
<g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dashboard-Home" transform="translate(8.000000, -200.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g id="Map-Box" transform="translate(0.000000, 217.000000)">
<g id="Map" transform="translate(43.000000, 40.000000)">
<g id="map_bd_full">
<g
id="div_rjs" className="division" transform="translate(0.000000, 150.000000)" onClick={() => this.props.updateSelectedArea('rajshahi')}>
<polygon id="Path" points="33.7753119 93.0137193 34.9672785 90.2646875 32.1855967 86.7298535 32.5830255 81.624372 30.1990922 78.8753401 30.5962012 75.7334072 38.5434982 73.3769576 43.3116846 71.0205079 42.9142558 67.878575 50.464124 68.271476 51.6564104 67.0930917 50.464124 65.1295431 48.4772997 66.3076085 45.6959376 64.736642 50.8615528 61.9876102 56.8220255 63.9511588 57.2191346 67.0930917 59.6033876 67.878575 61.9876407 65.1295431 63.9744649 66.7005096 63.5770361 71.0205079 67.1532558 72.5914743 75.8950907 67.878575 75.4976619 67.0930917 79.8687392 68.6640582 82.2526725 70.6279257 85.4317831 70.2350246 88.2131452 72.9843754 91.3919361 71.8059911 91.3919361 75.7334072 91.7893649 77.6969559 94.9681558 79.2679223 96.9549801 79.2679223 96.9549801 81.624372 96.1601225 83.5879206 91.7893649 83.9808217 89.4051119 85.9443703 90.9945073 85.9443703 93.3787604 88.30082 89.8025407 91.0501707 90.1999695 93.0137193 90.1999695 93.0137193 90.5973983 103.617583 86.6237498 106.366615 85.8288922 107.545 85.8288922 107.545 87.8157164 111.472416 90.9945073 110.686933 91.3919361 113.043063 92.1867937 115.006931 93.3787604 116.184996 88.2131452 118.148864 86.6237498 119.71983 88.610574 121.290797 86.226321 122.468862 87.8157164 123.646927 86.226321 124.825312 90.5973983 125.610795 91.3919361 127.181761 88.2131452 127.967245 87.8157164 129.538211 83.8420679 129.538211 78.2793437 127.181761 74.703124 124.039828 73.1134088 123.254345 70.3320467 122.468862 70.3320467 120.897896 73.5108376 120.112412 73.9082664 111.864998 71.1269043 105.974033 67.9477937 105.581132 66.3583982 107.937582 60.3982452 107.545 56.8220255 105.581132 54.0403437 107.937582 50.464124 105.974033 46.8879043 102.439518 45.2985088 102.8321 44.90108 100.868552 41.3248603 100.083068 37.3515316 98.1192009"></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
)
}
I am trying to use react-dropzone-component in reactjs, Everything works fine but after image is uploaded i want to add the onclick events to preview Template
Below is the config
const djsConfig = { addRemoveLinks: true, params: {
userId: this.props.userId }, previewTemplate:
<div class="dz-preview dz-file-preview" >
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-success-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Check</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M23.5,31.8431458 L17.5852419,25.9283877 C16.0248253,24.3679711 13.4910294,24.366835
11.9289322,25.9289322 C10.3700136,27.4878508 10.3665912,30.0234455 11.9283877,31.5852419 L20.4147581,40.0716123 C20.5133999,40.1702541 20.6159315,40.2626649 20.7218615,40.3488435 C22.2835669,41.8725651 24.794234,41.8626202 26.3461564,40.3106978 L43.3106978,23.3461564 C44.8771021,21.7797521 44.8758057,19.2483887 43.3137085,17.6862915
C41.7547899,16.1273729 39.2176035,16.1255422 37.6538436,17.6893022
L23.5,31.8431458 Z M27,53 C41.3594035,53 53,41.3594035 53,27
C53,12.6405965 41.3594035,1 27,1 C12.6405965,1 1,12.6405965 1,27
C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
stroke-opacity="0.198794158" stroke="#747474"
fill-opacity="0.816519475" fill="#FFFFFF"
sketch:type="MSShapeGroup"></path>
</g>
</svg>
</div>
<div class="dz-error-mark">
<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Error</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Check-+-Oval-2" sketch:type="MSLayerGroup" stroke="#747474"
stroke-opacity="0.198794158" fill="#FFFFFF"
fill-opacity="0.816519475">
<path d="M32.6568542,29 L38.3106978,23.3461564 C39.8771021,21.7797521 39.8758057,19.2483887
38.3137085,17.6862915 C36.7547899,16.1273729 34.2176035,16.1255422 32.6538436,17.6893022 L27,23.3431458 L21.3461564,17.6893022 C19.7823965,16.1255422 17.2452101,16.1273729 15.6862915,17.6862915
C14.1241943,19.2483887 14.1228979,21.7797521 15.6893022,23.3461564
L21.3431458,29 L15.6893022,34.6538436 C14.1228979,36.2202479
14.1241943,38.7516113 15.6862915,40.3137085 C17.2452101,41.8726271 19.7823965,41.8744578 21.3461564,40.3106978 L27,34.6568542 L32.6538436,40.3106978 C34.2176035,41.8744578 36.7547899,41.8726271
38.3137085,40.3137085 C39.8758057,38.7516113 39.8771021,36.2202479 38.3106978,34.6538436 L32.6568542,29 Z M27,53 C41.3594035,53 53,41.3594035 53,27 C53,12.6405965 41.3594035,1 27,1 C12.6405965,1
1,12.6405965 1,27 C1,41.3594035 12.6405965,53 27,53 Z" id="Oval-2"
sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
</div>
</div> };
is there any way i can do it?