I have an SVG of a map that I want to add a link to in React to the path tag.
<svg viewBox="0 0 777.74173 413.26299"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="prov00p36">
<clipPath id="SVG_CP_1">
<path d="M0,0L0,413.26299L777.74173,413.26299L777.74173,0L0,0z" />
</clipPath
<path clipPath="url(#SVG_CP_1)" fill="#E8BEFF" fillRule="evenodd"
stroke="none" d="M248.39427,287.05972L247.4343,286.57968
L247.1943,285.61962L248.39427,286.09965L248.39427,287.05972z"
/>
</g>
</svg>
Can I add a tag in the html? or do I have to create a function?
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.
SVG images aren't showing after a very short time in react. Below I have put that xmlns code
<svg xmlns="http://www.w3.org/2000/svg" width="145.03" height="84.204" viewBox="0 0 145.03 84.204">
<g id="noun_Arrow_2601665" transform="translate(-193.719 -290.21)">
<g id="Group_236" data-name="Group 236" transform="translate(193.719 290.21)">
<path id="Path_213" data-name="Path 213" d="M208.971,292.671l57.18,58.444,57.5-58.444c7.582-
7.9,20.534,5.055,12.636,12.952l-64.762,66.658a7.054,7.054,0,0,1-10.109,0l-65.394-
66.658C188.437,297.726,201.389,284.773,208.971,292.671Z" transform="translate(-193.719 -290.21)"
fill="#fff" fill-rule="evenodd"/>
</g>
</g>
This is how I imported and used this SVGs
import downArrowIcon from '../../../../../assets/icons/left-ar.svg';
<img src={downArrowIcon} alt="DropDownArrow" />
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 trying to insert value from clipboard with regular expression. How to do it?
Is it possible to delete svg tag with properties using regex?
I tried to write regularExpression(SVG, width="(\d+)px", $1) and variation of this.
For example
I've got this in my clipboard
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-932.000000, -4274.000000)">
<g transform="translate(0.000000, 4184.000000)">
<g transform="translate(932.000000, 90.000000)">
<rect fill="#3C5494" x="0" y="0" width="32" height="32" rx="16"></rect>
<path d="M17.1973392,16.7117794 L19.5654279,16.7117794 L19.9199468,13.8590668 L17.1973392,13.8590668 L17.1973392,12.0421097 C17.1973392,11.2181543 17.4178625,10.6566668 18.5566829,10.6566668 L20,10.6559859 L20,8.11206559 C19.7488603,8.07744655 18.887255,8 17.8848071,8 C15.7919823,8 14.3592018,9.32549911 14.3592018,11.759728 L14.3592018,13.8590668 L12,13.8590668 L12,16.7117794 L14.3592018,16.7117794 L14.3592018,24 L17.1973392,24 L17.1973392,16.7117794 Z" fill="#FFFFFE"></path>
</g>
</g>
</g>
</g>
</svg>
I use this template
/* eslint-disable max-len */
import React from 'react'
import Icon from './Icon'
const $NAME$ = ({ width, height }) => (
<Icon
width={width}
height={height}
viewBox='0 0 $width$ $height$'
>
$SVG$$END$
</Icon>
)
export default $NAME$
And I'm trying to insert $width$ and $height$ from svg properties
I except viewBox to be '0 0 32 32', but I get '0 0 '
regularExpression(String, Pattern, Replacement) Live Template function is run in the following way: all occurrences in String matching Pattern are replaced by the third argument, and the resultant string is returned (see the function implementation in https://github.com/JetBrains/intellij-community/blob/master/platform/lang-impl/src/com/intellij/codeInsight/template/macro/RegExMacro.java). So, the result of regularExpression(SVG, width="(\d+)px", $1) is your clipboard content with width="32px" replaced with 32
I am trying to use a chip with SVG delete icon,
The icon code is
const icon = (props) => {
return (
<SvgIcon>
<img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
</SvgIcon>
)
};
The content of SVG file
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
and the chip finally is
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {}}
deleteIcon={<icon/>}/>
But this is not working and I checked for the path and it is correct as I can render same svg in img tag.
Nayan SvgIcon takes a svg path that you can further style. But in your case your svg is already styled. It doesn't take svg file directory path which actually lose SvgIcon API purpose.
You just need to remove SvgIcon from img tag:
<Chip
label={ViewUtils.NOT_EXPIRED}
className={classes.chip}
onDelete={() => {console.log('You Deleted this icon')}}
deleteIcon={icon}
/>
and Make you svg as const or import from assets file directory I haven't tried that,
const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
<path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
<path d="M0 0h24v24H0z"/>
</g>
</svg>
There is a reason why we can't make <icon/> component. If we make it as component as following:
const Icon = (props) => {
return (
<SvgIcon>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<g fill="none" fill-rule="evenodd">
<rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
<path
fill="#FFF"
fill-rule="nonzero"
d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
/>
<path d="M0 0h24v24H0z" />
</g>
</svg>
</SvgIcon>
)
};
It works like a charm but onDelete doesn't get fired on this component.I've reported this issue as well on material UI. In first case onDelete gets called every time. Feel free to ask any question.
EDITED Fixed the above issue for Icon as Component rather than const. here is the codesandbox link for working example:
https://codesandbox.io/s/98842r4yy4
I am using React and typescript, created a component and added the tags from HTML and it worked normally.
export const IconTable: React.FC = () => {
return (
<svg width="130" height="130" viewBox="0 0 1024 1024">
<path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
</svg>
);