mirror of
https://github.com/zoriya/flood.git
synced 2025-12-20 14:15:15 +00:00
78 lines
4.9 KiB
JavaScript
78 lines
4.9 KiB
JavaScript
import React from 'react';
|
|
|
|
const _icons = {
|
|
active: <path d="M25.7,25.7H13v17.4H2.6L19.3,60L36,43.1H25.7V25.7z M40.7,0L24,16.9h10.3v17.4H47V16.9h10.3L40.7,0z"/>,
|
|
add: <path d="M53.7 25.3h-19v-19h-9.4v19h-19v9.4h19v19h9.4v-19h19"/>,
|
|
addMini: <polygon points="8,3.5 4.5,3.5 4.5,0 3.5,0 3.5,3.5 0,3.5 0,4.5 3.5,4.5 3.5,8 4.5,8 4.5,4.5 8,4.5"/>,
|
|
all: <polygon points="52,20.6 48.6,14.7 33.4,24 33.4,8.7 26.6,8.7 26.6,24 11.4,14.7 8,20.6 23.4,30 8,39.4 11.4,45.3 26.6,36 26.6,51.3 33.4,51.3 33.4,36 48.6,45.3 52,39.4 36.6,30 "/>,
|
|
completed: <polygon points="55.5,18.6 46.1,8.7 24.4,31.5 13.9,20.4 4.5,30.3 24.4,51.3 24.4,51.3 24.4,51.3"/>,
|
|
directoryFilled: <path d="M56.6,33.3c0-1.2-1.4-1.5-2.5-1.5H23.3c-2.5,0-5.8,1.5-7.5,3.3L6.4,45.8c-0.5,0.5-0.9,1.1-0.9,1.8c0,1.2,1.4,1.5,2.5,1.5 h30.8c2.5,0,5.8-1.5,7.5-3.3l9.5-10.8C56.2,34.6,56.6,33.9,56.6,33.3z M46.9,23.9c0-3.3-2.9-6.1-6.3-6.1H25.1V17 c0-3.3-2.9-6.1-6.3-6.1H9.8c-3.5,0-6.3,2.7-6.3,6.1V43c0,0.2,0,0.5,0,0.7l0.1-0.2l9.5-10.8c2.3-2.6,6.7-4.5,10.2-4.5h23.5V23.9z"/>,
|
|
directoryOutlined: <path d="M55.8,33c0,0.5-0.3,0.8-0.6,1.2l-9.2,11c-1.1,1.3-3.2,2.3-4.9,2.3H7.2c-0.7,0-1.7-0.2-1.7-1.1c0-0.5,0.3-0.8,0.6-1.2l9.2-11 c1.1-1.2,3.2-2.2,4.9-2.2h33.9C54.8,31.9,55.8,32.1,55.8,33z M20.2,28.1c-2.8,0-6.2,1.5-8,3.7l-8,9.5V15.5c0-1.6,1.3-2.9,3-2.9h10 c1.7,0,3,1.3,3,2.9v1.9c0,1.6,1.3,2.9,3,2.9h18c1.7,0,3,1.3,3,2.9v4.8H20.2z M59.8,33c0-0.7-0.2-1.4-0.5-2.1 c-0.9-1.9-3.1-2.9-5.2-2.9h-6v-4.8c0-3.7-3.1-6.8-7-6.8h-17v-1c0-3.7-3.1-6.8-7-6.8h-10c-3.8,0-7,3.1-7,6.8v29c0,3.7,3.1,6.8,7,6.8 h33.9c2.8,0,6.2-1.6,8-3.7l9.2-11C59.2,35.6,59.8,34.3,59.8,33z"/>,
|
|
download:
|
|
<g>
|
|
<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 "/>
|
|
</g>,
|
|
downloadSmall:
|
|
<path d="M55.9,39.1l-8.8-6.4h-5.4l9.4,7.8h-9.8c-0.3,0-0.5,0.2-0.7,0.4l-2.3,6.7H21.7l-2.3-6.7
|
|
c-0.1-0.2-0.4-0.4-0.7-0.4H8.9l9.4-7.8h-5.4l-8.8,6.4C2.8,40,2,41.9,2.4,43.5l1.6,9.2c0.4,1.5,1.9,2.8,3.5,2.8h45.2
|
|
c1.6,0,3.1-1.3,3.5-2.8l1.6-9.2C58,41.9,57.2,40,55.9,39.1z M44.4,20.1h-8.9V4.5h-11v15.6h-8.9L30,34.5L44.4,20.1z"/>,
|
|
dotsMini:
|
|
<g>
|
|
<circle cx="0.9" cy="4" r="0.9"/>
|
|
<circle cx="4" cy="4" r="0.9"/>
|
|
<circle cx="7.1" cy="4" r="0.9"/>
|
|
</g>,
|
|
error: <path d="M34.3,51.3h-8.5v-9h8.5V51.3z M34.3,36.4h-8.5L23.6,8.7h12.7L34.3,36.4z"/>,
|
|
file: <path d="M49.4,15.3l-8.6-8.9c-1-1.1-3.1-1.9-4.5-1.9H11.4c-1.5,0-2.7,1.2-2.7,2.7v45.5c0,1.5,1.2,2.7,2.7,2.7h37.2 c1.5,0,2.7-1.2,2.7-2.7V20C51.3,18.5,50.4,16.4,49.4,15.3z M37.1,8.4C37.6,8.5,38,8.8,38.2,9l8.7,8.9c0.2,0.2,0.4,0.7,0.6,1.2H37.1 V8.4z M47.7,51.9H12.3V8.1h21.3V20c0,1.5,1.2,2.7,2.7,2.7h11.5V51.9z"/>,
|
|
inactive: <path d="M56,52H42l-9.7-12.5l-11,4.8L13,20.7l-7,4l-2-9.9L17.2,8l9.5,24.4l9.6-4.3l10.9,15.4H56V52z"/>,
|
|
limits:
|
|
<g>
|
|
<path className="limits__bars--bottom" d="M24.4,48.5c0,3.3,2.5,6,5.6,6s5.6-2.7,5.6-6V18.6H24.4V48.5z M4.4,48.2c0,3.5,2.5,6.3,5.6,6.3 s5.6-2.8,5.6-6.3v-9.3H4.4V48.2z M44.4,30v18.2c0,3.5,2.5,6.3,5.6,6.3s5.6-2.8,5.6-6.3V30H44.4z"/>
|
|
<path className="limits__bars--top" d="M24.4,18.7v-7.6c0-3.1,2.5-5.5,5.6-5.5s5.6,2.5,5.6,5.5v7.6H24.4z"/>
|
|
<path className="limits__bars--top" d="M4.4,38.9v-27c0-3.5,2.5-6.3,5.6-6.3s5.6,2.8,5.6,6.3v27H4.4z"/>
|
|
<path className="limits__bars--top" d="M44.4,29.9V11.8c0-3.5,2.5-6.3,5.6-6.3s5.6,2.8,5.6,6.3v18.1H44.4z"/>
|
|
<path className="limits__bars--middle" d="M22.2,16.4h15.6c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2H22.2c-1.2,0-2.2-1-2.2-2.2 C20,17.4,21,16.4,22.2,16.4z"/>
|
|
<path className="limits__bars--middle" d="M2.2,36.7h15.6c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2H2.2c-1.2,0-2.2-1-2.2-2.2C0,37.7,1,36.7,2.2,36.7z"/>
|
|
<path className="limits__bars--middle" d="M42.2,27.8h15.6c1.2,0,2.2,1,2.2,2.2s-1,2.2-2.2,2.2H42.2c-1.2,0-2.2-1-2.2-2.2S41,27.8,42.2,27.8z"/>
|
|
</g>,
|
|
pause: <path d="M13.5 51h11V9h-11v42zm22-42v42h11V9h-11z"/>,
|
|
removeMini: <rect y="3.5" width="8" height="1"/>,
|
|
search:
|
|
<g>
|
|
<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"/>
|
|
</g>,
|
|
start: <path d="M13.1 9.5L46.9 30 13.1 50.5v-41z"/>,
|
|
stop: <path d="M11.9 11.9H48v36.2H11.9V11.9z"/>,
|
|
upload:
|
|
<g>
|
|
<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 "/>
|
|
</g>
|
|
};
|
|
|
|
export default class Icon extends React.Component {
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
render() {
|
|
let className = 'icon icon--' + this.props.icon;
|
|
let icon = _icons[this.props.icon];
|
|
let viewBox = '0 0 60 60';
|
|
|
|
if (this.props.size && this.props.size === 'mini') {
|
|
viewBox = '0 0 8 8';
|
|
}
|
|
|
|
return (
|
|
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox={viewBox}>
|
|
{icon}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
}
|