Svg Lineargradient not working with ReactJs - reactjs

Please help me to find the issue why svg linear gradient is not working with react
<svg width='258' height='229' viewBox='0 0 258 229' >
<defs>
<lineargradient x1='.258%' y1='49.75%' x2='101.258%' y2='49.75%' id='bgGradient'>
<stop stopColor='#3023AE' offset='0%' />
<stop stopColor='#53A0FD' offset='47.525%' />
<stop stopColor='#B4EC51' offset='100%' />
</lineargradient>
</defs>
<g id='Page6' fill='none' fillRule='evenodd' strokeLinecap='round'>
<path d='M10.1757812,18.984375 C183.016927,-13.7135417 261.63151,52.9101563 246.019531,218.855469'
id='Path7' stroke='url(#bgGradient)' strokeWidth='20' />
</g>
</svg>


This is a syntax error:
linearGradient NOT lineargradient
If this is generated SVG (and not a React Template - it's not clear what you're showing here) - you should be using SVG syntax, not React syntax. AKA:
stop-color NOT stopColor
stroke-width NOT strokeWidth
fill-rule NOT fillRule
stroke-linecap NOT strokeLinecap
In SVG, attribute names are generally lowercase and dashed, element names are Camel cased and concatenated. The one exception is with filter primitive attributes - which confusingly - are also Camel case (e.g tableValues)


I'll add to the list of syntax errors Michael Mullany's
stop offset NOT offset
Seemingly minor mistake, but no corrections code not working
In the end, after all errors have been corrected, - working code
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='258' height='229' viewBox='0 0 258 229' >
<defs>
<linearGradient x1='.258%' y1='49.75%' x2='101.258%' y2='49.75%' id='bgGradient' >
<stop offset='47.525%' stop-color='#3023AE' />
<stop offset='47.525%' stop-color='#53A0FD' />
<stop offset='100%' stop-color='#B4EC51' />
</linearGradient>
</defs>
<g id='Page6' fill='none' fill-rule='evenodd' stroke-linecap='round'>
<path d='M10.1757812,18.984375 C183.016927,-13.7135417 261.63151,52.9101563 246.019531,218.855469'
id='Path7' stroke-width='20' stroke="url(#bgGradient)" />
</g>
</svg>

Related

React-PDF errors when rendering <Svg> via Ternary conditional

I have an svg header that works perfectly when rendered directly in the tree
<Document>
<Page size="A4">
<MyHeaderSvg />
</Page>
</Document>
However when I render it via a Ternary within the render callback of a element, it errors...
<Document>
<Page size="A4">
<View render={({pageNumber}) => (pageNumber === 1)
? <MyHeaderSvg />
: <NonSvgHeader />
</Page>
</Document>
MyHeaderSvg
<Svg width="555" height="80" viewBox="0 0 555 80">
<Rect width="100%" height="80" rx="8" ry="8" fill="url(#header-rectangle)"/>
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="blue"/>
<Stop offset="1" stopColor="lightblue"/>
</RadialGradient>
</Defs>
<Text style={styles.title} x={`${535-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title</Text>
<G transform="translate(20,21) scale(0.749 0.749)">
<Path d="M0 47.6941V37.8042C0 35.4188 1.53483 32.1486 6.07125 32.1486C9.60438 32.1486 11.6936 35.4536 11.6936 38.6453C11.6936 41.7456 9.59732 44.8226 6.29155 44.8226C5.26468 44.8226 4.14881 44.4355 3.28243 43.6822V47.6941C3.28243 48.7881 2.59891 49.5178 1.64134 49.5178C0.683769 49.5178 0 48.7881 0 47.6941ZM5.85848 41.8135C7.56766 41.8135 8.4107 40.0355 8.4107 38.5075C8.4107 36.958 7.56766 35.1579 5.85848 35.1579C4.1031 35.1579 3.28243 36.7993 3.28243 38.3951C3.28243 39.9903 4.05763 41.8135 5.85848 41.8135Z" fill="white"/>
</G>
</Svg>
Experimentation
I tried commenting out different sections to see the results
Section commented out
Resulting error
Rect and Defs section only
Text line only
Original error
G section only
Original error
Text and G
Original error
G, Rect and Defs
Rect, Defs and Text
Updates:
I have been playing with the Repl on React-PDFs website to see where things can break more realtime.
Looks like changing any definitions of numbers from strings into actual numbers ie x="10" to x={10} helps.
<Text> breaks it entirely! There doesn't seem to be any way to get a <Text> element included in any way, shape or form.
<Path> does seem to work fine as it is defined above, however the <G> transform is breaking things as it is defined via a string.

How can I use this SVG in React without getting any error?

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 icons aren't showing after some duration of time in React?

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" />

How to turn an SVG file into a React component?

I have made the instagram logo in Illustrator and I extracted the generated code and I want to turn that code into a React component.
raw SVG code
<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#FFFFFF;}
</style>
<g>
<radialGradient id="SVGID_1_" cx="441.1558" cy="73.5138" r="47.7212" gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)" gradientUnits="userSpaceOnUse">
<stop offset="9.693880e-02" style="stop-color:#FFD87A"/>
<stop offset="0.1426" style="stop-color:#FCCE78"/>
<stop offset="0.2263" style="stop-color:#F5B471"/>
<stop offset="0.3378" style="stop-color:#EB8D65"/>
<stop offset="0.449" style="stop-color:#E36058"/>
<stop offset="0.6786" style="stop-color:#CD3694"/>
<stop offset="1" style="stop-color:#6668B0"/>
</radialGradient>
<path class="st0" d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"/>
<g>
<path class="st1" d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"/>
<path class="st1" d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"/>
<path class="st1" d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"/>
</g>
</g>
</svg>
This is what I've done so far , but it doesn't work.
InstagramLogo.js
import React from 'react';
/**
* <?xml version="1.0" encoding="utf-8"?>
* Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)
*/
export default ({
style={},
fill0={
offset_1: "9.693880e-02",
offset_2: "0.1426",
offset_3: "0.2263",
offset_4: "0.3378",
offset_5: "0.449",
offset_6: "0.6786",
offset_7: "1",
style_1: "stop-color:#FFD87A",
style_2: "stop-color:#FCCE78",
style_3: "stop-color:#F5B471",
style_4: "stop-color:#EB8D65",
style_5: "stop-color:#E36058",
style_6: "stop-color:#CD3694",
style_7: "stop-color:#6668B0",
},
fill1='#FFFFFF',
viewBox="0 0 512 512",
}) =>
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
viewBox={viewBox}
xmlSpace="preserve"
>
<g>
<radialGradient id="SVGID_1_" cx="441.1558" cy="73.5138" r="47.7212" gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)" gradientUnits="userSpaceOnUse">
<stop offset={fill0.offset_1} style={style.fill0.style_1}/>
<stop offset={fill0.offset_2} style={style.fill0.style_2}/>
<stop offset={fill0.offset_3} style={style.fill0.style_3}/>
<stop offset={fill0.offset_4} style={style.fill0.style_4}/>
<stop offset={fill0.offset_5} style={style.fill0.style_5}/>
<stop offset={fill0.offset_6} style={style.fill0.style_6}/>
<stop offset={fill0.offset_7} style={style.fill0.style_7}/>
</radialGradient>
<path
class="st0"
d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"
fill={fill0}
/>
<g>
<path
class="st1"
d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"
fill={fill1}
/>
<path
class="st1"
d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"
/>
<path
class="st1"
d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"
fill={fill1}
/>
</g>
</g>
</svg>
I tried to take those offsets and style rules and declare them as props and then passing them back to the radialGradient. It doesn't work and I have tweaked them several times but still cant make it work. How can I fix this component so that the svg logo gets displayed?

you had few issues in you component, first the class attribute should be className, and when using style attribute, you have as an object not a normal CSS string value, here is a fixed component code or a link to a working codesandbox too
import React from "react";
export default function Logo({
style = {},
fill0 = {
offset_1: "9.693880e-02",
offset_2: "0.1426",
offset_3: "0.2263",
offset_4: "0.3378",
offset_5: "0.449",
offset_6: "0.6786",
offset_7: "1",
style_1: { stopColor: "#FFD87A" },
style_2: { stopColor: "#FCCE78" },
style_3: { stopColor: "#F5B471" },
style_4: { stopColor: "#EB8D65" },
style_5: { stopColor: "#E36058" },
style_6: { stopColor: "#CD3694" },
style_7: { stopColor: "#6668B" }
},
fill1 = "#FFFFFF",
viewBox = "0 0 512 512"
}) {
return (
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox={viewBox}
xmlSpace="preserve"
>
<g>
<radialGradient
id="SVGID_1_"
cx="441.1558"
cy="73.5138"
r="47.7212"
gradientTransform="matrix(14.2175 0 0 -14.2171 -6122.1636 1596.7922)"
gradientUnits="userSpaceOnUse"
>
<stop offset={fill0.offset_1} style={fill0.style_1} />
<stop offset={fill0.offset_2} style={fill0.style_2} />
<stop offset={fill0.offset_3} style={fill0.style_3} />
<stop offset={fill0.offset_4} style={fill0.style_4} />
<stop offset={fill0.offset_5} style={fill0.style_5} />
<stop offset={fill0.offset_6} style={fill0.style_6} />
<stop offset={fill0.offset_7} style={fill0.style_7} />
</radialGradient>
<path
className="st0"
d="M512,395.1c0,64.6-52.3,116.9-116.9,116.9H116.9C52.3,512,0,459.7,0,395.1V117C0,52.4,52.4,0,117,0h276.3
C458.9,0,512,53.1,512,118.7V395.1z"
fill="url(#SVGID_1_)"
/>
<g>
<path
className="st1"
d="M327.2,70.6H184.8c-63.1,0-114.3,51.2-114.3,114.3v142.3c0,63.1,51.1,114.2,114.3,114.2h142.3
c63.1,0,114.2-51.1,114.2-114.2V184.9C441.4,121.7,390.3,70.6,327.2,70.6z M405.8,313.5c0,51-41.3,92.3-92.3,92.3h-115
c-51,0-92.3-41.3-92.3-92.3v-115c0-51,41.3-92.3,92.3-92.3h115c51,0,92.3,41.4,92.3,92.3V313.5z"
fill={fill1}
/>
<path
className="st1"
d="M261,159c-54,0-97.7,43.7-97.7,97.7c0,53.9,43.7,97.7,97.7,97.7c53.9,0,97.7-43.7,97.7-97.7
C358.6,202.7,314.9,159,261,159z M261,315.4c-32.5,0-58.8-26.3-58.8-58.8s26.3-58.8,58.8-58.8c32.4,0,58.8,26.3,58.8,58.8
C319.7,289.1,293.4,315.4,261,315.4z"
fill={fill1}
/>
<path
className="st1"
d="M376.7,157.5c0,13.7-11.1,24.8-24.8,24.8c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.9,24.8-24.9
S376.7,143.7,376.7,157.5z"
fill={fill1}
/>
</g>
</g>
</svg>
);
}

Save svg to a file like
Icon.svg
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 1.5C9.5 1.09375 9.34375 0.75 9.0625 0.4375C8.75 0.15625 8.40625 0 8 0C7.5625 0 7.21875 0.15625 6.9375 0.4375C6.625 0.75 6.5 1.09375 6.5 1.5C6.5 1.9375 6.625 2.28125 6.9375 2.5625C7.21875 2.875 7.5625 3 8 3C8.40625 3 8.75 2.875 9.0625 2.5625C9.34375 2.28125 9.5 1.9375 9.5 1.5ZM8 13C8.40625 13 8.75 13.1562 9.0625 13.4375C9.34375 13.75 9.5 14.0938 9.5 14.5C9.5 14.9375 9.34375 15.2812 9.0625 15.5625C8.75 15.875 8.40625 16 8 16C7.5625 16 7.21875 15.875 6.9375 15.5625C6.625 15.2812 6.5 14.9375 6.5 14.5C6.5 14.0938 6.625 13.75 6.9375 13.4375C7.21875 13.1562 7.5625 13 8 13ZM14.5 6.5C14.9062 6.5 15.25 6.65625 15.5625 6.9375C15.8438 7.25 16 7.59375 16 8C16 8.4375 15.8438 8.78125 15.5625 9.0625C15.25 9.375 14.9062 9.5 14.5 9.5C14.0625 9.5 13.7188 9.375 13.4375 9.0625C13.125 8.78125 13 8.4375 13 8C13 7.59375 13.125 7.25 13.4375 6.9375C13.7188 6.65625 14.0625 6.5 14.5 6.5ZM3 8C3 8.4375 2.84375 8.78125 2.5625 9.0625C2.25 9.375 1.90625 9.5 1.5 9.5C1.0625 9.5 0.71875 9.375 0.4375 9.0625C0.125 8.78125 0 8.4375 0 8C0 7.59375 0.125 7.25 0.4375 6.9375C0.71875 6.65625 1.0625 6.5 1.5 6.5C1.90625 6.5 2.25 6.65625 2.5625 6.9375C2.84375 7.25 3 7.59375 3 8ZM3.40625 11.0938C3.8125 11.0938 4.15625 11.25 4.46875 11.5312C4.75 11.8438 4.90625 12.1875 4.90625 12.5938C4.90625 13.0312 4.75 13.375 4.46875 13.6562C4.15625 13.9688 3.8125 14.0938 3.40625 14.0938C2.96875 14.0938 2.625 13.9688 2.34375 13.6562C2.03125 13.375 1.90625 13.0312 1.90625 12.5938C1.90625 12.1875 2.03125 11.8438 2.34375 11.5312C2.625 11.25 2.96875 11.0938 3.40625 11.0938ZM12.5938 11.0938C13 11.0938 13.3438 11.25 13.6562 11.5312C13.9375 11.8438 14.0938 12.1875 14.0938 12.5938C14.0938 13.0312 13.9375 13.375 13.6562 13.6562C13.3438 13.9688 13 14.0938 12.5938 14.0938C12.1562 14.0938 11.8125 13.9688 11.5312 13.6562C11.2188 13.375 11.0938 13.0312 11.0938 12.5938C11.0938 12.1875 11.2188 11.8438 11.5312 11.5312C11.8125 11.25 12.1562 11.0938 12.5938 11.0938ZM3.40625 1.90625C3.8125 1.90625 4.15625 2.0625 4.46875 2.34375C4.75 2.65625 4.90625 3 4.90625 3.40625C4.90625 3.84375 4.75 4.1875 4.46875 4.46875C4.15625 4.78125 3.8125 4.90625 3.40625 4.90625C2.96875 4.90625 2.625 4.78125 2.34375 4.46875C2.03125 4.1875 1.90625 3.84375 1.90625 3.40625C1.90625 3 2.03125 2.65625 2.34375 2.34375C2.625 2.0625 2.96875 1.90625 3.40625 1.90625Z" fill="#FFCC33"/>
</svg>
And in App.js import it as
import React from 'react'
import { ReactComponent as Icon } from './icon.svg
function App() {
return (
<div>
<Icon/>
</div>
)
}

You can try react-svg-loader with webpack.

How to use regularExpression function in Live Templates?

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

Resources