render() { return ( <svg className={`icon icon--circle ${this.props.className}`} viewBox={this.getViewBox()}> <circle cx="30" cy="30" r="10" /> </svg> ); }
const svg = ( <svg width="25" height="25" viewBox="0 0 100 100" style={{ marginTop: 4 }}> <circle fill={color} cx="50" cy="50" r="45" /> {decoration} </svg>
render() { return ( <svg className={`icon icon--information ${this.props.className}`} viewBox={this.getViewBox()}> <path className="icon--information__gylph" d="M27.14,28.26h5.72V43.95H27.14V28.26ZM30,24.44a4,4,0,1,0-4-4A4,4,0,0,0,30,24.44Z" /> <circle className="icon--information__fill" cx="30" cy="30" r="29.64" /> <path className="icon--information__ring" d="M30,0.36A29.64,29.64,0,1,0,59.64,30,29.64,29.64,0,0,0,30,.36Zm0,55.79A26.15,26.15,0,1,1,56.15,30,26.15,26.15,0,0,1,30,56.15Z" /> </svg> ); }
const WarningIcon = ({ width, color }) => { const DEFAULT_WIDTH = '22'; const DEFAULT_COLOR = theme.colors.white; return ( <svg xmlns="http://www.w3.org/2000/svg" width={width || DEFAULT_WIDTH} fill={theme.colors[color] || DEFAULT_COLOR} viewBox="0 0 512 512" > <path d="M256 0C114.497 0 0 114.507 0 256c0 141.503 114.507 256 256 256 141.503 0 256-114.507 256-256C512 114.497 397.493 0 256 0zm0 472c-119.393 0-216-96.615-216-216 0-119.393 96.615-216 216-216 119.393 0 216 96.615 216 216 0 119.393-96.615 216-216 216z" /> <path d="M256 128.877c-11.046 0-20 8.954-20 20V277.67c0 11.046 8.954 20 20 20s20-8.954 20-20V148.877c0-11.046-8.954-20-20-20z" /> <circle cx="256" cy="349.16" r="27" /> </svg> ); }
<svg width="68" height="62" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(1 1)" fill="none"> <circle strokeWidth="2" stroke="#EC261B" cx="30" cy="30" r="30" /> <path strokeWidth="2" d="M0 30h60M30 0c7.5038411 8.2150587 11.7682583 18.8761016 12 30-.2317417 11.1238984-4.4961589 21.7849413-12 30-7.5038411-8.2150587-11.7682583-18.8761016-12-30 .2317417-11.1238984 4.4961589-21.7849413 12-30z" stroke="#EC261B" /> <path d="M52.4761902 41C49.2134585 41 47 43.6756743 47 47.0810783 47 52.9189267 51.2857146 55.351351 57 59c5.7142854-3.648649 10-6.0810733 10-11.9189217C67 43.6756743 64.7865415 41 61.5238098 41 59.4237683 41 57.6976732 42.2162122 57 42.945942 56.3023268 42.2162122 54.5762317 41 52.4761902 41z" fill="#EC261B" />
const DotsIcon = ({ width, color }) => { const DEFAULT_WIDTH = '17'; const DEFAULT_COLOR = theme.colors.text.primary; return ( <svg width={width || DEFAULT_WIDTH} fill={theme.colors[color] || DEFAULT_COLOR} viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" > <circle cx="69.545" cy="306" r="69.545" /> <circle cx="306" cy="306" r="69.545" /> <circle cx="542.455" cy="306" r="69.545" /> </svg> ); }
const PostUserIcon = ({ width, color }) => { const DEFAULT_WIDTH = '22'; const DEFAULT_COLOR = theme.colors.text.secondary; return ( <svg width={width || DEFAULT_WIDTH} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" > <g id="Layer_1"> <circle cx="32" cy="32" fill="#4F5D73" r="32" /> <path d="M43.905 47.543c-3.821-1.66-5.217-4.242-5.643-6.469 2.752-2.215 4.943-5.756 6.148-9.573 1.239-1.579 1.96-3.226 1.96-4.62 0-.955-.347-1.646-.955-2.158-.203-8.106-5.942-14.613-13.039-14.714-.054 0-.108-.009-.163-.009-.022 0-.043.004-.065.004-7.052.039-12.783 6.41-13.125 14.409-.884.528-1.394 1.305-1.394 2.469 0 1.641.992 3.63 2.663 5.448 1.187 3.327 3.118 6.38 5.5 8.438-.354 2.292-1.699 5.039-5.697 6.776-2.159.938-6.105 1.781-7.808 2.649 4.362 4.769 12.624 7.769 19.589 7.805l.099.003c.008-.002.017-.001.025-.001 7.014 0 15.325-3.01 19.713-7.808-1.703-.868-5.65-1.711-7.808-2.649z" fill={theme.colors[color] || DEFAULT_COLOR} opacity="0.2" /> <path d="M43.905 45.543c-3.821-1.66-5.217-4.242-5.643-6.469 2.752-2.215 4.943-5.756 6.148-9.573 1.239-1.579 1.96-3.226 1.96-4.62 0-.955-.347-1.646-.955-2.158-.202-8.105-5.941-14.613-13.037-14.713-.056-.001-.11-.01-.165-.01-.022 0-.043.004-.065.004-7.052.039-12.783 6.41-13.125 14.409-.884.528-1.394 1.305-1.394 2.469 0 1.641.992 3.63 2.663 5.448 1.187 3.327 3.118 6.38 5.5 8.438-.354 2.292-1.699 5.039-5.697 6.776-2.159.938-6.105 1.781-7.808 2.649 4.362 4.769 12.624 7.769 19.589 7.805l.099.003c.008-.002.017-.001.025-.001 7.014 0 15.325-3.01 19.713-7.808-1.703-.868-5.65-1.711-7.808-2.649z" fill={color || DEFAULT_COLOR} /> </g> </svg> ); }
circlePoints.map(circlePoint => ( <circle cx={circlePoint.x} cy={circlePoint.y} key={`${circlePoint.x},${circlePoint.y}`} r={4} /> ))
render() { return ( <svg className={`icon icon--radio ${this.props.className}`} viewBox={this.getViewBox()}> <circle cx="30" cy="30" r="20" /> </svg> ); }
const svg = ( <svg width="25" height="25" viewBox="0 0 100 100" style={{ marginTop: 4 }}> <circle fill={color} cx="50" cy="50" r="45" /> {decoration} </svg>
const WarningIcon = ({ width, color }) => { const DEFAULT_WIDTH = '22'; const DEFAULT_COLOR = theme.colors.white; return ( <svg xmlns="http://www.w3.org/2000/svg" width={width || DEFAULT_WIDTH} fill={theme.colors[color] || DEFAULT_COLOR} viewBox="0 0 512 512" > <path d="M256 0C114.497 0 0 114.507 0 256c0 141.503 114.507 256 256 256 141.503 0 256-114.507 256-256C512 114.497 397.493 0 256 0zm0 472c-119.393 0-216-96.615-216-216 0-119.393 96.615-216 216-216 119.393 0 216 96.615 216 216 0 119.393-96.615 216-216 216z" /> <path d="M256 128.877c-11.046 0-20 8.954-20 20V277.67c0 11.046 8.954 20 20 20s20-8.954 20-20V148.877c0-11.046-8.954-20-20-20z" /> <circle cx="256" cy="349.16" r="27" /> </svg> ); }
const DotsIcon = ({ width, color }) => { const DEFAULT_WIDTH = '17'; const DEFAULT_COLOR = theme.colors.text.primary; return ( <svg width={width || DEFAULT_WIDTH} fill={theme.colors[color] || DEFAULT_COLOR} viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" > <circle cx="69.545" cy="306" r="69.545" /> <circle cx="306" cy="306" r="69.545" /> <circle cx="542.455" cy="306" r="69.545" /> </svg> ); }
const PostUserIcon = ({ width, color }) => { const DEFAULT_WIDTH = '22'; const DEFAULT_COLOR = theme.colors.text.secondary; return ( <svg width={width || DEFAULT_WIDTH} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" > <g id="Layer_1"> <circle cx="32" cy="32" fill="#4F5D73" r="32" /> <path d="M43.905 47.543c-3.821-1.66-5.217-4.242-5.643-6.469 2.752-2.215 4.943-5.756 6.148-9.573 1.239-1.579 1.96-3.226 1.96-4.62 0-.955-.347-1.646-.955-2.158-.203-8.106-5.942-14.613-13.039-14.714-.054 0-.108-.009-.163-.009-.022 0-.043.004-.065.004-7.052.039-12.783 6.41-13.125 14.409-.884.528-1.394 1.305-1.394 2.469 0 1.641.992 3.63 2.663 5.448 1.187 3.327 3.118 6.38 5.5 8.438-.354 2.292-1.699 5.039-5.697 6.776-2.159.938-6.105 1.781-7.808 2.649 4.362 4.769 12.624 7.769 19.589 7.805l.099.003c.008-.002.017-.001.025-.001 7.014 0 15.325-3.01 19.713-7.808-1.703-.868-5.65-1.711-7.808-2.649z" fill={theme.colors[color] || DEFAULT_COLOR} opacity="0.2" /> <path d="M43.905 45.543c-3.821-1.66-5.217-4.242-5.643-6.469 2.752-2.215 4.943-5.756 6.148-9.573 1.239-1.579 1.96-3.226 1.96-4.62 0-.955-.347-1.646-.955-2.158-.202-8.105-5.941-14.613-13.037-14.713-.056-.001-.11-.01-.165-.01-.022 0-.043.004-.065.004-7.052.039-12.783 6.41-13.125 14.409-.884.528-1.394 1.305-1.394 2.469 0 1.641.992 3.63 2.663 5.448 1.187 3.327 3.118 6.38 5.5 8.438-.354 2.292-1.699 5.039-5.697 6.776-2.159.938-6.105 1.781-7.808 2.649 4.362 4.769 12.624 7.769 19.589 7.805l.099.003c.008-.002.017-.001.025-.001 7.014 0 15.325-3.01 19.713-7.808-1.703-.868-5.65-1.711-7.808-2.649z" fill={color || DEFAULT_COLOR} /> </g> </svg> ); }