render() { return ( <svg className={`icon icon--remove-mini ${this.props.className}`} viewBox={this.getViewBox()}> <rect y="3.5" width="8" height="1" /> </svg> ); }
<rect width={width} height={height} fill="transparent" /> <g transform={transformString} className={`rsm-zoomable-group ${className}`} {...restProps} /> </g>
render() { return ( <svg className={`icon icon--clipboard ${this.props.className}`} viewBox={this.getViewBox()}> <path d="M40.23,8.2H35.3v-2a2.46,2.46,0,0,0-2.47-2.47H27.91a2.47,2.47,0,0,0-2.47,2.47v2H20.51A2.47,2.47,0,0,0,18,10.66v4.27H42.7V10.66A2.47,2.47,0,0,0,40.23,8.2Z" /> <rect x="18.05" y="31.07" width="24.65" height="5.19" /> <rect x="18.05" y="20.69" width="24.65" height="5.19" /> <rect x="18.05" y="41.45" width="24.65" height="5.19" /> <polygon points="43.93 11.47 43.93 13.94 47.63 13.94 47.63 53.38 13.12 53.38 13.12 13.94 16.81 13.94 16.81 11.47 10.65 11.47 10.65 55.85 50.1 55.85 50.1 11.47 43.93 11.47" /> </svg> ); }
render() { return ( <svg className={`icon icon--disk ${this.props.className}`} viewBox={this.getViewBox()}> <polygon points="51.8,0 51.8,0 51.8,3.7 51.8,56.3 8.2,56.3 8.2,3.7 8.2,0 8.2,0 4.5,0 4.5,60.1 55.5,60.1 55.5,0 " /> <rect x="18.4" y="8.9" width="23.1" height="3.8" /> <path d="M30,51.8c3.4,0,6.8-1.1,9.6-3.3L29.4,38.4l3.1-3.1l10.2,10.1c4.3-6.1,3.8-14.5-1.7-20c-3-3-7-4.5-11-4.5 s-7.9,1.5-11,4.5C13,31.4,13,41.2,19,47.3C22.1,50.3,26,51.8,30,51.8z" /> <rect x="40" y="0" width="3.5" height="3.8" /> <rect x="45.9" y="0" width="3.5" height="3.8" /> <rect x="34.1" y="0" width="3.5" height="3.8" /> <rect x="16.5" y="0" width="3.5" height="3.8" /> <rect x="10.6" y="0" width="3.5" height="3.8" /> <rect x="22.4" y="0" width="3.5" height="3.8" /> <rect x="28.2" y="0" width="3.5" height="3.8" /> </svg> ); }
render() { return ( <svg className={`icon icon--search ${this.props.className}`} viewBox={this.getViewBox()}> <path d="M26,38.9c-7.1,0-12.8-5.8-12.8-12.8C13.2,19,19,13.2,26,13.2c7.1,0,12.8,5.8,12.8,12.8 C38.9,33.1,33.1,38.9,26,38.9z M26,18.2c-4.3,0-7.8,3.5-7.8,7.8s3.5,7.8,7.8,7.8s7.8-3.5,7.8-7.8S30.4,18.2,26,18.2z" /> <rect x="30.9" y="36.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 39.1863 -16.2315)" width="16.5" height="5" /> </svg> ); }
<svg width="61px" height="69px" viewBox="0 0 61 69" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <rect id="mpath1" x="10" y="18" width="45" height="45" rx="4.08"></rect> <rect id="mpath2" x="10" y="10" width="45" height="45" rx="4.08"></rect> </defs> <g fill="none" fillRule="evenodd"> <g transform="translate(32.500000, 40.500000) rotate(45.000000) translate(-32.500000, -40.500000) "> <use fill="#FFFFFF" fillRule="evenodd" href="#mpath1"></use> <rect stroke="#2A51C6" strokeWidth="2" x="11" y="19" width="43" height="43" rx="4.08"></rect> </g> <g transform="translate(32.500000, 32.500000) rotate(45.000000) translate(-32.500000, -32.500000) "> <use fill="#FFFFFF" fillRule="evenodd" href="#mpath2"></use> <rect stroke="#2A51C6" strokeWidth="2" x="11" y="11" width="43" height="43" rx="4.08"></rect> </g> </g>
render() { return ( <svg className={`icon icon--upload ${this.props.className}`} viewBox={this.getViewBox()}> <rect x="28.2" y="4.5" width="3.7" height="55.5" /> <polygon points="30,0 48.2,27.3 45.1,29.3 30,6.7 14.9,29.3 11.8,27.3 " /> </svg> ); }
render() { return ( <g className="drag-group"> <rect className="drag-target" onMouseDown={this.dragStart} onMouseMove={this.dragMove} onMouseUp={this.dragEnd} width="100%" /> <g transform={`translate(${this.state.coords.x}, ${this.state.coords.y})`}>{this.props.children}</g> </g> ); }
function Icon({type, onClick}){ const clickable = (onClick) ? "clickable" : ""; if (type==="pen") return (<svg version="1.1" onClick={onClick} className={`icon ${clickable}`} id="pen" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" space="preserve"><g><g><g><polygon points="85.333,282.64 85.333,362.64 165.333,362.64 378.667,149.307 298.667,69.307 "/><path d="M441.707,56.08L391.893,6.267c-8.32-8.32-21.867-8.32-30.187,0L320,47.973l80,80l41.707-41.707 C450.027,77.947,450.027,64.4,441.707,56.08z"/></g></g></g><g><g id="halfSeen"><rect y="426.64" width="512" height="85.333"/></g></g></svg>); else if (type==="trash") return (<svg height="512pt" onClick={onClick} className={`icon ${clickable}`} id="trash" viewBox="-47 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m416.875 114.441406-11.304688-33.886718c-4.304687-12.90625-16.339843-21.578126-29.941406-21.578126h-95.011718v-30.933593c0-15.460938-12.570313-28.042969-28.027344-28.042969h-87.007813c-15.453125 0-28.027343 12.582031-28.027343 28.042969v30.933593h-95.007813c-13.605469 0-25.640625 8.671876-29.945313 21.578126l-11.304687 33.886718c-2.574219 7.714844-1.2695312 16.257813 3.484375 22.855469 4.753906 6.597656 12.445312 10.539063 20.578125 10.539063h11.816406l26.007813 321.605468c1.933594 23.863282 22.183594 42.558594 46.109375 42.558594h204.863281c23.921875 0 44.175781-18.695312 46.105469-42.5625l26.007812-321.601562h6.542969c8.132812 0 15.824219-3.941407 20.578125-10.535157 4.753906-6.597656 6.058594-15.144531 3.484375-22.859375zm-249.320312-84.441406h83.0625v28.976562h-83.0625zm162.804687 437.019531c-.679687 8.402344-7.796875 14.980469-16.203125 14.980469h-204.863281c-8.40625 0-15.523438-6.578125-16.203125-14.980469l-25.816406-319.183593h288.898437zm-298.566406-349.183593 9.269531-27.789063c.210938-.640625.808594-1.070313 1.484375-1.070313h333.082031c.675782 0 1.269532.429688 1.484375 1.070313l9.269531 27.789063zm0 0"/><path d="m282.515625 465.957031c.265625.015625.527344.019531.792969.019531 7.925781 0 14.550781-6.210937 14.964844-14.21875l14.085937-270.398437c.429687-8.273437-5.929687-15.332031-14.199219-15.761719-8.292968-.441406-15.328125 5.925782-15.761718 14.199219l-14.082032 270.398437c-.429687 8.273438 5.925782 15.332032 14.199219 15.761719zm0 0"/><path d="m120.566406 451.792969c.4375 7.996093 7.054688 14.183593 14.964844 14.183593.273438 0 .554688-.007812.832031-.023437 8.269531-.449219 14.609375-7.519531 14.160157-15.792969l-14.753907-270.398437c-.449219-8.273438-7.519531-14.613281-15.792969-14.160157-8.269531.449219-14.609374 7.519532-14.160156 15.792969zm0 0"/><path d="m209.253906 465.976562c8.285156 0 15-6.714843 15-15v-270.398437c0-8.285156-6.714844-15-15-15s-15 6.714844-15 15v270.398437c0 8.285157 6.714844 15 15 15zm0 0"/></svg>); }
const NextIcon = props => ( <svg width="6.26px" height="7.65px" viewBox="0 0 6.26 7.65" {...props}> <path fill="#EFEFEF" d="M4.66,4.15c0.2-0.15,0.2-0.41,0-0.56L0.35,0.17C0.15,0.02,0,0.09,0,0.34V7.4c0,0.25,0.15,0.33,0.35,0.17 L4.66,4.15z"/> <rect x="4.72" fill="#EFEFEF" width="1.54" height="7.62"/> </svg> )
render() { const path = transform(45, 30, this.props.equation); return ( <svg viewBox="0 0 45 30" className="curve-preview" {...this.props}> <rect className="curve-preview_bg" width="100%" height="100%" /> <path d={path} className="curve-preview_curve" /> </svg> ); }
const SpeakerIcon = props => ( <svg width="5.36px" height="6.23px" viewBox="0 0 5.36 6.23" {...props}> <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#3F413B" points="0.76,2.08 0,2.08 0,4.34 0.76,4.34 2.29,6.23 3.05,6.23 3.05,0 2.29,0 "/> <rect x="3.62" y="1.6" fill-rule="evenodd" clip-rule="evenodd" fill="#3F413B" width="0.6" height="3.02"/> <rect x="4.76" y="0.85" fill-rule="evenodd" clip-rule="evenodd" fill="#3F413B" width="0.6" height="4.53"/> </svg> )
render() { return ( <svg className={`icon icon--download ${this.props.className}`} viewBox={this.getViewBox()}> <rect x="28.2" width="3.7" height="55.5" /> <polygon points="30,60 11.8,32.7 14.9,30.7 30,53.3 45.1,30.7 48.2,32.7 " /> </svg> ); }
render() { return ( <svg className={`icon icon--clock ${this.props.className}`} viewBox={this.getViewBox()}> <rect y="26.63" width="60" height="6.75" /> </svg> ); }
const PreviousIcon = props => ( <svg width="6.26px" height="7.65px" viewBox="0 0 6.26 7.65" {...props}> <path fill="#EFEFEF" d="M1.6,4.15C1.4,4,1.4,3.74,1.6,3.59l4.31-3.42c0.2-0.15,0.35-0.08,0.35,0.17V7.4c0,0.25-0.15,0.33-0.35,0.17 L1.6,4.15z"/> <rect x="0" y="0" fill="#EFEFEF" width="1.54" height="7.62"/> </svg> )