@risemaxi/sigil
Version:
Icons and Signs for the Rise Design System
49 lines (48 loc) • 3.43 kB
JavaScript
import { memo } from 'react';
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
const Icon = memo((_props) => {
const { color = 'black', size = 24, ...props } = _props;
return (<Svg fill="none" viewBox="0 0 32 26" width={size} height={size} {...props}>
<Path fill="#fff" d="M32 20.577a4.975 4.975 0 0 1-4.968 4.969H0V5.868A4.975 4.975 0 0 1 4.968.9H32z"/>
<Path fill="url(#a)" d="M23.198 15.531h2.054c.059 0 .195-.02.254-.02a.916.916 0 0 0 .724-.919.95.95 0 0 0-.724-.92c-.059-.019-.176-.019-.254-.019h-2.054z"/>
<Path fill="url(#b)" d="M25.017 2.563a3.56 3.56 0 0 0-3.56 3.56v3.696h5.027c.117 0 .254 0 .352.02 1.135.059 1.976.646 1.976 1.663 0 .802-.568 1.486-1.624 1.623v.04c1.154.077 2.035.723 2.035 1.72 0 1.076-.979 1.78-2.27 1.78h-5.515v7.238h5.222a3.56 3.56 0 0 0 3.56-3.56V2.563z"/>
<Path fill="url(#c)" d="M25.976 11.736a.83.83 0 0 0-.724-.84c-.04 0-.137-.02-.196-.02h-1.858v1.721h1.858c.059 0 .176 0 .196-.02a.83.83 0 0 0 .724-.84"/>
<Path fill="url(#d)" d="M5.34 2.563a3.56 3.56 0 0 0-3.56 3.56v8.782c.998.489 2.034.802 3.07.802 1.233 0 1.898-.743 1.898-1.76V9.8H9.8v4.127c0 1.604-.998 2.915-4.382 2.915-2.054 0-3.658-.45-3.658-.45v7.491h5.223a3.56 3.56 0 0 0 3.56-3.56V2.563z"/>
<Path fill="url(#e)" d="M15.179 2.563a3.56 3.56 0 0 0-3.56 3.56v4.655c.9-.763 2.464-1.252 4.987-1.135 1.35.06 2.797.43 2.797.43v1.507c-.723-.372-1.584-.704-2.699-.783-1.917-.136-3.07.802-3.07 2.445 0 1.663 1.153 2.602 3.07 2.445 1.115-.078 1.976-.43 2.7-.782v1.506s-1.428.372-2.798.43c-2.523.118-4.088-.371-4.987-1.134v8.215h5.222a3.56 3.56 0 0 0 3.56-3.56v-17.8z"/>
<Defs>
<LinearGradient id="a" x1={-18.409} x2={74.365} y1={13.254} y2={13.254} gradientUnits="userSpaceOnUse">
<Stop stopColor="#007940"/>
<Stop offset={0.229} stopColor="#00873F"/>
<Stop offset={0.743} stopColor="#40A737"/>
<Stop offset={1} stopColor="#5CB531"/>
</LinearGradient>
<LinearGradient id="b" x1={0.058} x2={32.087} y1={13.213} y2={13.213} gradientUnits="userSpaceOnUse">
<Stop stopColor="#007940"/>
<Stop offset={0.229} stopColor="#00873F"/>
<Stop offset={0.743} stopColor="#40A737"/>
<Stop offset={1} stopColor="#5CB531"/>
</LinearGradient>
<LinearGradient id="c" x1={-20.096} x2={81.175} y1={13.188} y2={13.188} gradientUnits="userSpaceOnUse">
<Stop stopColor="#007940"/>
<Stop offset={0.229} stopColor="#00873F"/>
<Stop offset={0.743} stopColor="#40A737"/>
<Stop offset={1} stopColor="#5CB531"/>
</LinearGradient>
<LinearGradient id="d" x1={0.056} x2={32.579} y1={13.224} y2={13.224} gradientUnits="userSpaceOnUse">
<Stop stopColor="#1F286F"/>
<Stop offset={0.475} stopColor="#004E94"/>
<Stop offset={0.826} stopColor="#0066B1"/>
<Stop offset={1} stopColor="#006FBC"/>
</LinearGradient>
<LinearGradient id="e" x1={11.568} x2={20.237} y1={13.224} y2={13.224} gradientUnits="userSpaceOnUse">
<Stop stopColor="#6C2C2F"/>
<Stop offset={0.173} stopColor="#882730"/>
<Stop offset={0.573} stopColor="#BE1833"/>
<Stop offset={0.859} stopColor="#DC0436"/>
<Stop offset={1} stopColor="#E60039"/>
</LinearGradient>
</Defs>
</Svg>);
});
Icon.displayName = 'JcbLogo';
export const JcbLogo = Icon;