Skip to content

Instantly share code, notes, and snippets.

@sadamiak
Last active Nov 25, 2020
Embed
What would you like to do?
// Make component accept props and add default color
function Icon({size, color = "#A41FAF", gradientColor = "#A41FAF"}) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
// Add default size
width={size === "big" ? 96 : 48}
height={size === "big" ? 62 : 31}
viewBox="0 0 48 31"
>
<defs>
<linearGradient
id="linearGradient-1"
x1="50%"
x2="54.584%"
y1="29.143%"
y2="70.857%"
>
{/* Set gradient color */}
<stop offset="0%" stopColor={gradientColor}></stop>
<stop offset="100%" stopColor="#D8D8D8" stopOpacity="0"></stop>
</linearGradient>
</defs>
<g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
<g transform="translate(-736 -358)">
<g transform="translate(120 176)">
<g transform="translate(595 148)">
<g transform="translate(22.83 35.64)">
<path
fill="url(#linearGradient-1)"
d="M.102 14.765c.334-3.111 2.907-4.224 7.72-3.338l.741.142.897.184 1.673.362.61.123.278.05.261.04.246.032.232.021.22.01.206-.002c.368-.016.681-.096.969-.262l.154-.1c.127-.09.25-.198.37-.328l.145-.165.145-.186a5.28 5.28 0 00.073-.101l.146-.219.149-.241.075-.13.155-.276.16-.301.251-.5.46-.967 1.407-3.072.259-.55.128-.264.255-.502c.084-.162.168-.319.252-.47l.25-.44C20.862.13 22.603-.498 24.913.332l.312.12c.052.02.105.043.158.065l.322.145.33.16.338.175.347.19.355.203.364.218.374.23.778.497 1.033.685 2.287 1.542c4.894 3.28 9.092 2.506 12.594-2.325v26.507H0l.102-13.98z"
opacity="0.2"
></path>
{/* Set color */}
<path
stroke={color}
strokeLinecap="round"
strokeWidth="2"
d="M.102 14.765c.334-3.111 2.907-4.224 7.72-3.338 7.218 1.33 6.117 2.614 10.023-5.886C21.75-2.96 24.57-.36 31.91 4.56c4.894 3.282 9.092 2.507 12.594-2.324"
></path>
</g>
</g>
</g>
</g>
</g>
</svg>
);
}
// Rendering added in the component file for simplicity
const domContainer = document.querySelector('#react');
ReactDOM.render([<Icon color={"#FEE12B"} gradientColor={"#FEE12B"} key={1} />, <Icon size={"big"} key={2} />, <Icon gradientColor={"#228B22"} key={3} />], domContainer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment