phosphor-solid
Version:
A clean and friendly icon family for Solid-js
101 lines (100 loc) • 12.5 kB
JSX
/* GENERATED FILE */
import { useContext } from "solid-js";
import { IconContext } from "../lib";
const renderPathFor = (weight, color) => {
switch (weight) {
case "bold":
return (<>
<circle cx="128" cy="128" r="96" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<polygon points="128 74.039 76.68 111.325 96.282 171.655 159.718 171.655 179.32 111.325 128 74.039" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<line x1="128" y1="32" x2="128" y2="74.0389" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<line x1="36.69857" y1="98.33437" x2="76.67992" y2="111.32512" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<line x1="71.57262" y1="205.66563" x2="96.28244" y2="171.6555" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<line x1="184.42738" y1="205.66563" x2="159.71756" y2="171.6555" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
<line x1="219.30143" y1="98.33437" x2="179.32008" y2="111.32512" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/>
</>);
case "duotone":
return (<>
<polygon points="128 86 88.056 115.021 103.313 161.979 152.687 161.979 167.944 115.021 128 86" opacity="0.2"/>
<path d="M92.98335,38.58649a96.37511,96.37511,0,0,1,70.03342.00005l-.00031.00077L128,64,92.98372,38.58745Z" opacity="0.2"/>
<path d="M32.142,133.67252A96.375,96.375,0,0,1,53.78352,67.0668l.00064.00052,13.34822,41.15559L32.143,133.67246Z" opacity="0.2"/>
<path d="M103.77312,220.91932a96.37514,96.37514,0,0,1-56.65819-41.16465l.0007-.00045,43.26611.02287,13.39164,41.14123Z" opacity="0.2"/>
<path d="M208.885,179.75478a96.37518,96.37518,0,0,1-56.65826,41.16457l-.0002-.00081,13.39171-41.14145,43.26588-.02287Z" opacity="0.2"/>
<path d="M202.21656,67.06689A96.375,96.375,0,0,1,223.858,133.67264l-.00083,0-34.98958-25.44969,13.34815-41.15537Z" opacity="0.2"/>
<circle cx="128" cy="128" r="96" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polygon points="128 86 88.056 115.021 103.313 161.979 152.687 161.979 167.944 115.021 128 86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="128" y1="64" x2="128" y2="86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="163.016 38.587 128 64 92.984 38.587" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="67.13238" y1="108.22291" x2="88.05563" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="53.784 67.067 67.132 108.223 32.143 133.672" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="90.38174" y1="179.77709" x2="103.31302" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="47.116 179.754 90.382 179.777 103.773 220.918" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="165.61826" y1="179.77709" x2="152.68698" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="152.227 220.919 165.618 179.777 208.884 179.754" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="188.86762" y1="108.22291" x2="167.94437" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="223.857 133.673 188.868 108.223 202.216 67.068" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</>);
case "fill":
return (<>
<path d="M231.76978,134.8335a8.01081,8.01081,0,0,0,.07861-1.23633Q231.99652,130.81689,232,128a103.4965,103.4965,0,0,0-22.96765-65.10937,7.99721,7.99721,0,0,0-1.39539-1.69776,104.47716,104.47716,0,0,0-41.09863-29.78662,7.94558,7.94558,0,0,0-1.14416-.44824,103.96223,103.96223,0,0,0-74.78968.00049,7.97953,7.97953,0,0,0-1.14245.44775A104.47726,104.47726,0,0,0,48.36353,61.19238a7.99972,7.99972,0,0,0-1.39612,1.69825A103.49872,103.49872,0,0,0,24,128q0,2.81982.1521,5.60352A7.99281,7.99281,0,0,0,24.23,134.8291a103.303,103.303,0,0,0,15.69409,48.41211,7.99155,7.99155,0,0,0,1.05615,1.64307,104.37857,104.37857,0,0,0,60.27588,43.62353c.10743.03565.21851.05762.32752.08887a104.21832,104.21832,0,0,0,52.82971.00049c.11011-.03125.22241-.05371.33093-.08936a104.38026,104.38026,0,0,0,60.27552-43.62353,7.99155,7.99155,0,0,0,1.05615-1.64307A103.30408,103.30408,0,0,0,231.76978,134.8335ZM68.53931,117.0918l13.1676,4.27832,12.738,39.2041L86.30713,171.7749l-34.6377-.01806a87.36716,87.36716,0,0,1-11.15771-34.2793Zm118.92151,0,28.02746,20.38574a87.36716,87.36716,0,0,1-11.15771,34.2793l-34.6377.01806-8.13782-11.20068,12.738-39.2041Zm5.73291-48.13819L182.51624,101.875l-13.16749,4.27832L136,81.92383V68.07861l28.04492-20.353A88.44244,88.44244,0,0,1,193.19373,68.95361ZM91.95532,47.72559,120,68.07861V81.92383L86.65125,106.15332,73.48376,101.875,62.8064,68.95361A88.44288,88.44288,0,0,1,91.95532,47.72559Zm18.02539,166.4165-10.72937-32.9624,8.13782-11.20117h41.22168l8.13782,11.20117-10.72925,32.9624a88.31128,88.31128,0,0,1-36.0387,0Z"/>
</>);
case "light":
return (<>
<circle cx="128" cy="128" r="96" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polygon points="128 86 88.056 115.021 103.313 161.979 152.687 161.979 167.944 115.021 128 86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<line x1="128" y1="64" x2="128" y2="86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polyline points="163.016 38.587 128 64 92.984 38.587" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<line x1="67.13238" y1="108.22291" x2="88.05563" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polyline points="53.784 67.067 67.132 108.223 32.143 133.672" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<line x1="90.38174" y1="179.77709" x2="103.31302" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polyline points="47.116 179.754 90.382 179.777 103.773 220.918" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<line x1="165.61826" y1="179.77709" x2="152.68698" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polyline points="152.227 220.919 165.618 179.777 208.884 179.754" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<line x1="188.86762" y1="108.22291" x2="167.94437" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
<polyline points="223.857 133.673 188.868 108.223 202.216 67.068" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
</>);
case "thin":
return (<>
<circle cx="128" cy="128" r="96" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polygon points="128 86 88.056 115.021 103.313 161.979 152.687 161.979 167.944 115.021 128 86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="128" y1="64" x2="128" y2="86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polyline points="163.016 38.587 128 64 92.984 38.587" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="67.13238" y1="108.22291" x2="88.05563" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polyline points="53.784 67.067 67.132 108.223 32.143 133.672" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="90.38174" y1="179.77709" x2="103.31302" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polyline points="47.116 179.754 90.382 179.777 103.773 220.918" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="165.61826" y1="179.77709" x2="152.68698" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polyline points="152.227 220.919 165.618 179.777 208.884 179.754" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<line x1="188.86762" y1="108.22291" x2="167.94437" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
<polyline points="223.857 133.673 188.868 108.223 202.216 67.068" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
</>);
case "regular":
return (<>
<circle cx="128" cy="128" r="96" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polygon points="128 86 88.056 115.021 103.313 161.979 152.687 161.979 167.944 115.021 128 86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="128" y1="64" x2="128" y2="86" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="163.016 38.587 128 64 92.984 38.587" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="67.13238" y1="108.22291" x2="88.05563" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="53.784 67.067 67.132 108.223 32.143 133.672" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="90.38174" y1="179.77709" x2="103.31302" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="47.116 179.754 90.382 179.777 103.773 220.918" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="165.61826" y1="179.77709" x2="152.68698" y2="161.97871" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="152.227 220.919 165.618 179.777 208.884 179.754" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<line x1="188.86762" y1="108.22291" x2="167.94437" y2="115.02129" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
<polyline points="223.857 133.673 188.868 108.223 202.216 67.068" fill="none" stroke={color} stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
</>);
default:
console.error('Unsupported icon weight. Choose from "thin", "light", "regular", "bold", "fill", or "duotone".');
return null;
}
};
const SoccerBall = (props, ref) => {
const { color, size, weight, mirrored, children, ...restProps } = props;
const { color: contextColor, size: contextSize, weight: contextWeight, mirrored: contextMirrored, ...restContext } = useContext(IconContext);
return (<svg ref={ref} xmlns="http://www.w3.org/2000/svg" width={size ?? contextSize} height={size ?? contextSize} fill={color ?? contextColor} viewBox="0 0 256 256" transform={mirrored || contextMirrored ? "scale(-1, 1)" : undefined} {...restContext} {...restProps}>
{children}
<rect width="256" height="256" fill="none"/>
{renderPathFor(weight ?? contextWeight, color ?? contextColor)}
</svg>);
};
export default SoccerBall;