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>
);
Related
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?
I am relatively new to coding and helping a project upload an image to their website banner. I know how to do it when the image is directly placed into the files, but I cant seem to figure out where these images are being sourced from. How would I go about uploading a new image?
const Coinsquare: React.FC<SVGProps<SVGSVGElement>> = ({ width = '252', height = '51', ...props }) => (
<svg
width={width}
height={height}
viewBox="0 0 252 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<rect x="0.991934" y="-0.50179932" width="251" height="50" fill="url(#coinsquare_logo)" />
<defs>
<pattern id="coinsquare_logo" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlinkHref="#image0_207_6382" transform="translate(-0.002843) scale(0.000967006 0.00485437)" />
</pattern>
<image
id="image0_207_6382"
width="1040"
height="206"
xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBAAAADOCAYAAACHHvG8AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAEEKADA....."
/>
</defs>
</svg>
)
export default Coinsquare
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.
var filled_lock = ' <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg> ';
This var filled_lock is my svg icon which Im trying to render in a div but it's not showing it up
I tried putting it in <img src={filled_lock} /> still it doesn't show up
I tried <div dangerouslySetInnerHTML={{__html:{filled_lock}}} /> still no success
Does anyone know how we can render it in react
So investigating it further I saw that using quotes in the filled_lock was showing the string itself. On removing the string it was failing due to this reason. Which when I fixed gave me the desired output
New code
var filled_lock = <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg>;
For output:
<div>{filled_lock}</div>
Use react-svg for this:
import { ReactSVG } from 'react-svg';
<ReactSVG src={filled_lock} />
You can save svg image in an *.svg file and import it as:
import filled_lock from './filled_lock.svg';
function App() {
return (
<img src={filled_lock} alt="filled_lock" />
);
}
Or
import { ReactComponent as FilledLock } from './filled_lock.svg';
function App() {
return (
<FilledLock />
);
}
Docs
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