feat(icons): add action icons
This commit is contained in:
Sérgio Ramos
Sérgio Ramos
parent
f0a64cf8af
commit
195a24dc5e
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -2,15 +2,49 @@ import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
<svg width="4" height="16" viewBox="0 0 4 16" xmlns="http://www.w3.org/2000/svg" {...rest}>
|
||||
<path fill={light ? white : secondary} fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
|
||||
<path fill={light ? white : secondary} style={{ transform: `translateY(${remcalc(6)})` }} fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
|
||||
<path fill={light ? white : secondary} style={{ transform: `translateY(${remcalc(12)})` }} fill-rule="evenodd" d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="4"
|
||||
height="16"
|
||||
viewBox="0 0 4 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fill-rule="evenodd"
|
||||
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
|
||||
/>
|
||||
<path
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
style={{ transform: `translateY(${remcalc(6)})` }}
|
||||
fill-rule="evenodd"
|
||||
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
|
||||
/>
|
||||
<path
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
style={{ transform: `translateY(${remcalc(12)})` }}
|
||||
fill-rule="evenodd"
|
||||
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -1,22 +1,54 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="27"
|
||||
height="18"
|
||||
viewBox="0 0 27 18"
|
||||
width="18"
|
||||
height="12"
|
||||
viewBox="0 0 18 12"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fillRule="evenodd"
|
||||
d="M13.504 16.795A8.953 8.953 0 0 1 9 18a9.001 9.001 0 1 1 4.504-16.795A9.001 9.001 0 1 1 18 18a8.924 8.924 0 0 1-4.496-1.205zm-1.777-1.346A6.987 6.987 0 0 1 9 16a6.979 6.979 0 0 1-4.691-1.805A6.983 6.983 0 0 1 2 9c0-1.139.273-2.215.758-3.166A6.991 6.991 0 0 1 9 2c.965 0 1.883.195 2.719.549A8.998 8.998 0 0 0 9 9a8.952 8.952 0 0 0 2.727 6.45zm1.773-1.088A6.979 6.979 0 0 1 11 9c0-2.152.98-4.07 2.508-5.355A6.983 6.983 0 0 1 16 9a6.99 6.99 0 0 1-2.5 5.361zm1.785 1.079c.836.351 1.75.56 2.715.56a7 7 0 1 0 0-14 7.02 7.02 0 0 0-2.734.541A8.982 8.982 0 0 1 18 9a8.968 8.968 0 0 1-2.715 6.44z"
|
||||
<g transform="translate(-1104 1236)">
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1104 -1236)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 12 0C 10.9 0 9.9 0.300003 9 0.800003C 8.1 0.300003 7.1 0 6 0C 2.7 0 0 2.7 0 6C 0 9.3 2.7 12 6 12C 7.1 12 8.1 11.7 9 11.2C 9.9 11.7 10.9 12 12 12C 15.3 12 18 9.3 18 6C 18 2.7 15.3 0 12 0ZM 6 11C 3.2 11 1 8.8 1 6C 1 3.2 3.2 1 6 1C 6.7 1 7.4 1.2 8.1 1.5C 6.8 2.6 6 4.2 6 6C 6 7.8 6.8 9.4 8.1 10.5C 7.4 10.8 6.7 11 6 11ZM 11 6C 11 7.6 10.2 9.1 9 10C 7.8 9.1 7 7.7 7 6C 7 4.3 7.8 2.9 9 2C 10.2 2.9 11 4.4 11 6ZM 12 11C 11.3 11 10.6 10.8 9.9 10.5C 11.2 9.4 12 7.8 12 6C 12 4.2 11.2 2.6 9.9 1.5C 10.5 1.2 11.2 1 12 1C 14.8 1 17 3.2 17 6C 17 8.8 14.8 11 12 11Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="9"
|
||||
height="6"
|
||||
viewBox="0 0 9 6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fillRule="evenodd"
|
||||
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -1,13 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
export default props => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="17"
|
||||
viewBox="0 0 12 17"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z" fillRule="evenodd" />
|
||||
<path
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
|
||||
export const Tick = props => (
|
||||
<svg
|
||||
@ -19,8 +20,8 @@ export const Tick = props => (
|
||||
);
|
||||
|
||||
export const Completed = props => (
|
||||
<Colors white secondary greenDark>
|
||||
{({ white, secondary, greenDark }) => (
|
||||
<Colors white text greenDark>
|
||||
{({ white, text, greenDark }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
@ -44,8 +45,8 @@ export const Completed = props => (
|
||||
);
|
||||
|
||||
export const PartCompleted = props => (
|
||||
<Colors white secondary greenDark>
|
||||
{({ white, secondary, greenDark }) => (
|
||||
<Colors white text greenDark>
|
||||
{({ white, text, greenDark }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
@ -64,7 +65,7 @@ export const PartCompleted = props => (
|
||||
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
||||
/>
|
||||
<path
|
||||
fill={secondary}
|
||||
fill={text}
|
||||
fillRule="evenodd"
|
||||
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
|
||||
/>
|
||||
@ -74,8 +75,8 @@ export const PartCompleted = props => (
|
||||
);
|
||||
|
||||
export const Incomplete = props => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
<Colors white text>
|
||||
{({ white, text }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
@ -90,7 +91,7 @@ export const Incomplete = props => (
|
||||
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
||||
/>
|
||||
<path
|
||||
fill={secondary}
|
||||
fill={text}
|
||||
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
|
||||
/>
|
||||
</svg>
|
||||
@ -98,18 +99,29 @@ export const Incomplete = props => (
|
||||
</Colors>
|
||||
);
|
||||
|
||||
export default ({ fill, checked, border, ...rest }) => {
|
||||
export default ({
|
||||
fill,
|
||||
checked,
|
||||
border,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => {
|
||||
if (fill && checked) {
|
||||
return <Completed {...rest} />;
|
||||
return <Completed style={{ ...style, ...rotateStyle }} {...rest} />;
|
||||
}
|
||||
|
||||
if (checked && border) {
|
||||
return <PartCompleted {...rest} />;
|
||||
return <PartCompleted style={{ ...style, ...rotateStyle }} {...rest} />;
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
return <Tick {...rest} />;
|
||||
return <Tick style={{ ...style, ...rotateStyle }} {...rest} />;
|
||||
}
|
||||
|
||||
return <Incomplete {...rest} />;
|
||||
};
|
||||
return <Incomplete style={{ ...style, ...rotateStyle }} {...rest} />;
|
||||
}}
|
||||
</Rotate>
|
||||
);
|
||||
|
||||
@ -1,23 +1,38 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="6"
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fillRule="evenodd"
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
54
packages/icons/src/clipboard.js
Normal file
54
packages/icons/src/clipboard.js
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="13"
|
||||
height="16"
|
||||
version="1.1"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-2367 443)">
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(2370 -437)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(2367 -443)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<path id={ids[0]} d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z" />
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
73
packages/icons/src/cns.js
Normal file
73
packages/icons/src/cns.js
Normal file
@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="13"
|
||||
viewBox="0 0 16 13"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1106 442)">
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1106 -442)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1106.6 -434)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="translate(1112.1 -434)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1117.6 -434)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M15 1v4H1V1h14zm0-1H1C.4 0 0 .4 0 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M3 2.4l-.6.7V0h-1v3.1l-.7-.7-.7.7L1.9 5l1.8-1.9-.7-.7z"
|
||||
/>
|
||||
<path
|
||||
id={ids[2]}
|
||||
d="M3 2.4l-.6.7V0h-1v3.1l-.6-.7-.8.7L1.9 5l1.9-1.9-.8-.7z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -2,16 +2,19 @@ import { withTheme } from 'styled-components';
|
||||
|
||||
export const colors = {
|
||||
white: '#FFF',
|
||||
secondary: '#464646',
|
||||
text: '#464646',
|
||||
greenDark: '#008138',
|
||||
green: '#009858',
|
||||
orange: '#e38200',
|
||||
primary: '#3b46cc'
|
||||
};
|
||||
|
||||
export default withTheme(({ theme = {}, children, ...rest }) =>
|
||||
export default withTheme(
|
||||
({ theme = {}, children, direction = 'down', style = {}, ...rest }) =>
|
||||
children(
|
||||
Object.keys(rest).reduce(
|
||||
Object.keys(rest)
|
||||
.filter(name => Boolean(rest[name]))
|
||||
.reduce(
|
||||
(sum, name) => ({
|
||||
...sum,
|
||||
[name]: theme[name] || colors[name] || rest[name]
|
||||
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="9"
|
||||
height="13"
|
||||
viewBox="0 0 9 13"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fillRule="evenodd"
|
||||
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
53
packages/icons/src/delete.js
Normal file
53
packages/icons/src/delete.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="9"
|
||||
height="12"
|
||||
viewBox="0 0 9 12"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(17403 -18583)">
|
||||
<g>
|
||||
<use
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(-17403 18583)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
fillRule="evenodd"
|
||||
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
53
packages/icons/src/duplicate.js
Normal file
53
packages/icons/src/duplicate.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(17861 -18582)">
|
||||
<g>
|
||||
<use
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(-17861 18582)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
fillRule="evenodd"
|
||||
d="M 7 0L 5 0L 5 5L 0 5L 0 7L 5 7L 5 12L 7 12L 7 7L 12 7L 12 5L 7 5L 7 0Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
57
packages/icons/src/edit.js
Normal file
57
packages/icons/src/edit.js
Normal file
@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
version="1.1"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1886 444)">
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1886 -441.9)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1889.4 -444)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M13 7v5c0 .5-.4 1-1 1H2c-.5 0-1-.4-1-1V2c0-.5.4-1 1-1h5V0H2C.9 0 0 .9 0 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V7h-1z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M9.8 0L1.4 8.5 0 12.7l4.2-1.4 8.5-8.5L9.8 0zm-7 8.5l7.1-7.1 1.4 1.4-7.1 7.1-1.4-1.4z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
15
packages/icons/src/fill.js
Normal file
15
packages/icons/src/fill.js
Normal file
@ -0,0 +1,15 @@
|
||||
export default ({ fill = null, disabled = false, light = false, colors }) => {
|
||||
if (fill) {
|
||||
return fill;
|
||||
}
|
||||
|
||||
if (disabled) {
|
||||
return colors.grey;
|
||||
}
|
||||
|
||||
if (light) {
|
||||
return colors.white;
|
||||
}
|
||||
|
||||
return colors.text;
|
||||
};
|
||||
69
packages/icons/src/firewall.js
Normal file
69
packages/icons/src/firewall.js
Normal file
@ -0,0 +1,69 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="17"
|
||||
viewBox="0 0 15 17"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1886 1522)">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1886 -1522)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1889 -1519)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 7.5 1.60001C 8.6 2.60001 10.5 3.20001 12.9 3.20001C 13.3 3.20001 13.6 3.20001 14 3.20001L 14 5C 14 10 11.7 13.9 7.5 15.9C 3.5 13.9 1 9.3 1 4L 1 3.20001C 1.3 3.20001 1.7 3.20001 2.1 3.20001C 4.5 3.20001 6.4 2.70001 7.5 1.60001ZM 7.5 0C 6.6 1.8 3.9 2.20001 2.1 2.20001C 0.899998 2.20001 0 2.10001 0 2.10001L 0 4C 0 9.9 3 15 7.5 17C 12 15 15 10.9 15 5L 15 2.10001C 15 2.10001 14.1 2.20001 12.9 2.20001C 11.1 2.20001 8.4 1.8 7.5 0Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 4 2.05496L 4 9.06593C 2.1 7.73626 1 5.3187 1 2.65936L 1 2.41758C 2.2 2.41758 3.2 2.29672 4 2.05496ZM 5 0C 4.2 1.08791 2.3 1.20879 1 1.20879C 0.4 1.20879 0 1.20879 0 1.20879L 0 2.65936C 0 6.40661 2 9.67034 5 11L 5 0Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,14 +1,24 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ healthy = true, ...rest }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
|
||||
export default ({
|
||||
healthy = true,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors green orange>
|
||||
{({ green, orange }) => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g fill-rule="evenodd">
|
||||
@ -20,5 +30,7 @@ export default ({ healthy = true, ...rest }) => (
|
||||
</g>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
75
packages/icons/src/id.js
Normal file
75
packages/icons/src/id.js
Normal file
@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="12"
|
||||
version="1.1"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-2124 441)">
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(2124 -441)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(2126 -439)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="translate(2134 -438)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[3]}`}
|
||||
transform="translate(2134 -436)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[4]}`}
|
||||
transform="translate(2134 -434)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M16 1c.6 0 1 .5 1 1v8c0 .6-.5 1-1 1H2c-.6 0-1-.5-1-1V2c0-.6.5-1 1-1h14zm0-1H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M4.7 1C5.4 1 6 1.6 6 2.3v2.5c0 .7-.6 1.3-1.3 1.3H2.3C1.6 6.1 1 5.5 1 4.8V2.3C1 1.6 1.6 1 2.3 1h2.4zm0-1H2.3C1 0 0 1 0 2.3v2.3c0 1.3 1 2.3 2.3 2.3h2.3C6 7 7 5.9 7 4.6V2.3C7 1 6 0 4.7 0z"
|
||||
/>
|
||||
<path id={ids[2]} d="M5 0H0v1h5V0z" />
|
||||
<path id={ids[3]} d="M6 0H0v1h6V0z" />
|
||||
<path id={ids[4]} d="M4 0H0v1h4V0z" />
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,50 +1,64 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
export default props => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({ direction = 'down', style = {}, ...rest }) => (
|
||||
<Colors white text>
|
||||
{({ white, text }) => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-2061 2768)">
|
||||
<clipPath id="a" clipRule="evenodd">
|
||||
<clipPath id={`${ids[0]}`} clipRule="evenodd">
|
||||
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
|
||||
</clipPath>
|
||||
<g clipPath="url(#a)">
|
||||
<g clipPath={`url(#${ids[0]})`}>
|
||||
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
|
||||
<use
|
||||
xlinkHref="#b"
|
||||
fill={secondary}
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
fill={text}
|
||||
transform="translate(2061 -2754)"
|
||||
/>
|
||||
<use
|
||||
xlinkHref="#c"
|
||||
fill={secondary}
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
fill={text}
|
||||
transform="translate(2072 -2768)"
|
||||
/>
|
||||
<use
|
||||
xlinkHref="#d"
|
||||
fill={secondary}
|
||||
xlinkHref={`#${ids[3]}`}
|
||||
fill={text}
|
||||
transform="translate(2067.29 -2755)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path id="b" fillRule="evenodd" d="M0 0h2v8h20V0h2v10H0V0z" />
|
||||
<path id="c" fillRule="evenodd" d="M0 0h2v18H0V0z" />
|
||||
<path
|
||||
id="d"
|
||||
id={`${ids[1]}`}
|
||||
fillRule="evenodd"
|
||||
d="M0 0h2v8h20V0h2v10H0V0z"
|
||||
/>
|
||||
<path id={`${ids[2]}`} fillRule="evenodd" d="M0 0h2v18H0V0z" />
|
||||
<path
|
||||
id={`${ids[3]}`}
|
||||
fillRule="evenodd"
|
||||
d="M1.414 0L0 1.414l4.295 4.292.655.658.759.756 5.705-5.705L10 0 5.707 4.293 1.414 0z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -4,15 +4,31 @@ export { default as Arrow } from './arrow';
|
||||
export { default as Bin } from './bin';
|
||||
export { default as Checkcircle } from './checkcircle';
|
||||
export { default as Chevron } from './chevron';
|
||||
export { default as Clipboard } from './clipboard';
|
||||
export { default as Close } from './close';
|
||||
export { default as Cns } from './cns';
|
||||
export { default as DataCenter } from './data-center';
|
||||
export { default as Delete } from './delete';
|
||||
export { default as Dot } from './dot';
|
||||
export { default as Duplicate } from './duplicate';
|
||||
export { default as Edit } from './edit';
|
||||
export { default as Firewall } from './firewall';
|
||||
export { default as Health } from './health';
|
||||
export { default as Id } from './id';
|
||||
export { default as Import } from './import';
|
||||
export { default as InstanceCount } from './instance-count';
|
||||
export { default as InstanceType } from './instance-type';
|
||||
export { default as Instances } from './instances';
|
||||
export { default as Loading } from './loading';
|
||||
export { default as Login } from './login';
|
||||
export { default as Metadata } from './metadata';
|
||||
export { default as Minus } from './minus';
|
||||
export { default as Network } from './network';
|
||||
export { default as Package } from './package';
|
||||
export { default as Plus } from './plus';
|
||||
export { default as Reset } from './reset';
|
||||
export { default as Start } from './start';
|
||||
export { default as Stop } from './stop';
|
||||
export { default as Tags } from './tags';
|
||||
export { default as Triton } from './triton';
|
||||
export { default as User } from './user';
|
||||
|
||||
124
packages/icons/src/instance-count.js
Normal file
124
packages/icons/src/instance-count.js
Normal file
@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1105 974)">
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1105 -974)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1111 -974)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1117 -974)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1105 -968)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1111 -968)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1117 -968)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1105 -962)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1111 -962)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1117 -962)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
97
packages/icons/src/instance-type.js
Normal file
97
packages/icons/src/instance-type.js
Normal file
@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="18"
|
||||
viewBox="0 0 15 18"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1106 1522)">
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1108 -1516)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1110 -1514)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1112 -1514)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1114 -1514)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1116 -1514)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="translate(1106 -1522)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 10 1L 10 7L 1 7L 1 1L 10 1ZM 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 7C 0 7.5 0.4 8 1 8L 10 8C 10.5 8 11 7.6 11 7L 11 1C 11 0.4 10.6 0 10 0Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 0.5 4C 0.2 4 0 3.8 0 3.5L 0 0.5C 0 0.2 0.2 0 0.5 0C 0.8 0 1 0.2 1 0.5L 1 3.5C 1 3.8 0.8 4 0.5 4Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[2]}
|
||||
d="M 14 4L 11 1L 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 17C 0 17.5 0.4 18 1 18L 14 18C 14.5 18 15 17.6 15 17L 15 5L 14 4ZM 12.6 4L 11 4L 11 2.4L 12.6 4ZM 1 17L 1 1L 10 1L 10 5L 14 5L 14 17L 1 17Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="9"
|
||||
viewBox="0 0 18 9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fillRule="evenodd"
|
||||
d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -1,34 +1,80 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
export default props => (
|
||||
<Colors primary>
|
||||
{({ primary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
secondary = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white primary text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="24"
|
||||
height="6"
|
||||
viewBox="0 0 24 6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<use xlinkHref="#a" fill={primary} />
|
||||
<use
|
||||
xlinkHref="#a"
|
||||
transform="translate(9)"
|
||||
fill={primary}
|
||||
opacity=".5"
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
fill={calcFill({
|
||||
fill,
|
||||
disabled,
|
||||
light,
|
||||
colors: {
|
||||
...colors,
|
||||
text: secondary ? colors.text : colors.primary
|
||||
}
|
||||
})}
|
||||
/>
|
||||
<use
|
||||
xlinkHref="#a"
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(9)"
|
||||
opacity=".5"
|
||||
fill={calcFill({
|
||||
fill,
|
||||
disabled,
|
||||
light,
|
||||
colors: {
|
||||
...colors,
|
||||
text: secondary ? colors.text : colors.primary
|
||||
}
|
||||
})}
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(18)"
|
||||
fill={primary}
|
||||
opacity=".25"
|
||||
fill={calcFill({
|
||||
fill,
|
||||
disabled,
|
||||
light,
|
||||
colors: {
|
||||
...colors,
|
||||
text: secondary ? colors.text : colors.primary
|
||||
}
|
||||
})}
|
||||
/>
|
||||
<defs>
|
||||
<path id="a" fillRule="evenodd" d="M0 0h6v6H0V0z" />
|
||||
<path id={ids[0]} fillRule="evenodd" d="M0 0h6v6H0V0z" />
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
65
packages/icons/src/login.js
Normal file
65
packages/icons/src/login.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1885 179)">
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1889 -179)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1885 -175)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 12 1.00001L 12 16L 1 16L 1 11L 0 11L 0 16C 0 16.6 0.4 17 1 17L 12 17C 12.6 17 13 16.6 13 16L 13 1.00001C 13 0.400006 12.6 6.10352e-06 12 6.10352e-06L 1 6.10352e-06C 0.4 6.10352e-06 0 0.400006 0 1.00001L 0 6.00001L 1 6.00001L 1 1.00001L 12 1.00001Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 13.7 4.29999L 13.2 3.9L 8.7 6.10352e-06L 8 0.599997L 11.9 4.00001L 0 4.00001L 0 5.00001L 11.9 5.00001L 8 8.4L 8.7 9.00001L 13.9 4.50001L 13.7 4.29999Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
77
packages/icons/src/metadata.js
Normal file
77
packages/icons/src/metadata.js
Normal file
@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="11"
|
||||
viewBox="0 0 18 11"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1884 1236)">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1884 -1233.9)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1896 -1233.9)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="translate(1891 -1236)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
|
||||
/>
|
||||
<path id={ids[2]} d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" />
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="8"
|
||||
height="2"
|
||||
viewBox="0 0 8 2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
d="M0 0h8v2H0z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
52
packages/icons/src/network.js
Normal file
52
packages/icons/src/network.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1105 710)">
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1105 -710)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,22 +1,52 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="24"
|
||||
height="22"
|
||||
viewBox="0 0 24 22"
|
||||
width="17"
|
||||
height="18"
|
||||
viewBox="0 0 17 18"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fillRule="evenodd"
|
||||
d="M10.139.001a.539.539 0 0 0-.12.034L1.574 3.377c-.293.115-.43.52-.272.794l1.64 2.806L.17 9.403c-.284.244-.2.789.144.932l2.787 1.174v5.794c.014.349.156.51.434.63l9.365 3.686a.543.543 0 0 0 .425-.008l8.013-3.704c.287-.16.337-.279.366-.604v-5.569l1.461-.803a.579.579 0 0 0 .221-.742l-1.555-2.996 2.031-2.133c.254-.263.137-.781-.204-.906L14.813.924A.536.536 0 0 0 14.65.9a.544.544 0 0 0-.357.112l-2.2 1.744L10.69.27A.554.554 0 0 0 10.19 0h-.051zm-.162 1.235l1.181 2.08-7.282 3.082-1.31-2.227 7.411-2.935zm4.75.837l7.768 2.832-1.479 1.545-7.988-3.039 1.7-1.338zM11.95 4.18l7.792 2.97-6.653 3.073L5.099 7.08l6.85-2.9zm-8.21 3.557l8.27 3.246-2.567 2.02-7.895-3.341L3.74 7.737zm17.175.077l1.258 2.41-6.654 3.66-1.64-2.815 7.036-3.255zm-8.353 4.136v8.349L4.19 17v-5.024l5.133 2.167a.547.547 0 0 0 .535-.07l2.703-2.123zm8.056.388v4.688l-6.969 3.22v-7.39l1.199 2.046a.56.56 0 0 0 .73.208l5.04-2.772z"
|
||||
<g transform="translate(-1885 710)">
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1885 -710)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 12.9 2.5L 8.5 0L 0 4.79999L 0 13.2L 8.5 18L 17 13.2L 17 4.79999L 12.9 2.5ZM 15 4.79999L 8.5 8.5L 5.4 6.79999L 11.9 3.10001L 15 4.79999ZM 10.9 2.5L 4.4 6.10001L 2 4.79999L 8.5 1.10001L 10.9 2.5ZM 1 5.39999L 4 7.10001L 4 9L 5 10L 5 7.60001L 8 9.29999L 8 16.6L 1 12.6L 1 5.39999ZM 16 5.39999L 16 12.6L 9 16.6L 9 9.29999L 16 5.39999Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -1,22 +1,37 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="8"
|
||||
height="8"
|
||||
viewBox="0 0 8 8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={light ? white : secondary}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
53
packages/icons/src/reset.js
Normal file
53
packages/icons/src/reset.js
Normal file
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="20"
|
||||
height="21"
|
||||
viewBox="0 0 20 21"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(17997 -18577)">
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
fillRule="evenodd"
|
||||
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
13
packages/icons/src/rotate.js
Normal file
13
packages/icons/src/rotate.js
Normal file
@ -0,0 +1,13 @@
|
||||
const rotate = {
|
||||
up: 180,
|
||||
right: 90,
|
||||
down: 0,
|
||||
left: -90
|
||||
};
|
||||
|
||||
export default ({ children, direction = 'down' }) =>
|
||||
children({
|
||||
style: {
|
||||
transform: `rotate(${rotate[direction]}deg)`
|
||||
}
|
||||
});
|
||||
74
packages/icons/src/start.js
Normal file
74
packages/icons/src/start.js
Normal file
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 15 15"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(18240 -18581)">
|
||||
<g>
|
||||
<mask>
|
||||
<rect
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
fill="white"
|
||||
x={-1}
|
||||
y={-1}
|
||||
width={15}
|
||||
height={16}
|
||||
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18226 18582)"
|
||||
/>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18226 18582)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask={`url(#${ids[0]})`}>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18226 18582)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 5.59466 1.92996C 5.9545 1.16288 7.0455 1.16288 7.40534 1.92996L 11.4608 10.5753C 11.7719 11.2385 11.288 12 10.5555 12L 2.44449 12C 1.71201 12 1.22807 11.2385 1.53915 10.5753L 5.59466 1.92996Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[2]}
|
||||
d="M 1.53915 10.5753L -0.271523 9.72593L 1.53915 10.5753ZM 7.40534 1.92996L 5.59466 2.77934L 7.40534 1.92996ZM 5.59466 2.77934L 9.65017 11.4247L 13.2715 9.72593L 9.21601 1.08058L 5.59466 2.77934ZM 10.5555 10L 2.44449 10L 2.44449 14L 10.5555 14L 10.5555 10ZM 3.34983 11.4247L 7.40534 2.77934L 3.78399 1.08058L -0.271523 9.72593L 3.34983 11.4247ZM 2.44449 10C 3.17698 10 3.66091 10.7615 3.34983 11.4247L -0.271523 9.72593C -1.20476 11.7154 0.247037 14 2.44449 14L 2.44449 10ZM 9.65017 11.4247C 9.33909 10.7615 9.82302 10 10.5555 10L 10.5555 14C 12.753 14 14.2048 11.7154 13.2715 9.72593L 9.65017 11.4247ZM 9.21601 1.08058C 8.13651 -1.22066 4.86349 -1.22066 3.78399 1.08058L 7.40534 2.77934C 7.0455 3.54642 5.9545 3.54642 5.59466 2.77934L 9.21601 1.08058Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
65
packages/icons/src/stop.js
Normal file
65
packages/icons/src/stop.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(18113 -18582)">
|
||||
<g>
|
||||
<mask id={ids[0]}>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
fill="white"
|
||||
transform="translate(-18113 18582)"
|
||||
/>
|
||||
</mask>
|
||||
<g mask={`url(#${ids[0]})`}>
|
||||
<use
|
||||
xlinkHref={`#${ids[2]}`}
|
||||
transform="translate(-18113 18582)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[2]}
|
||||
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
67
packages/icons/src/tags.js
Normal file
67
packages/icons/src/tags.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId(), rndId()];
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 17 17"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<g transform="translate(-1885 974)">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(1885 -974)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(1888 -971)"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id={ids[0]}
|
||||
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
|
||||
/>
|
||||
<path
|
||||
id={ids[1]}
|
||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
@ -1,6 +1,20 @@
|
||||
import React from 'react';
|
||||
import rndId from 'rnd-id';
|
||||
|
||||
const TritonBeta = props => (
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
const ids = [rndId(), rndId()];
|
||||
|
||||
const TritonBeta = ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<svg
|
||||
width="105"
|
||||
height="30"
|
||||
@ -8,55 +22,70 @@ const TritonBeta = props => (
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
{...props}
|
||||
{...rest}
|
||||
>
|
||||
<g id="Canvas" transform="translate(26223 1404)">
|
||||
<g id="Group">
|
||||
<g id="Beta">
|
||||
<g transform="translate(26223 1404)">
|
||||
<g>
|
||||
<g>
|
||||
<use
|
||||
xlinkHref="#path0_fill"
|
||||
xlinkHref={`#${ids[0]}`}
|
||||
transform="translate(-26177 -1383)"
|
||||
fill="#FFFFFF"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
<g id="logo">
|
||||
<g>
|
||||
<use
|
||||
xlinkHref="#path1_fill"
|
||||
xlinkHref={`#${ids[1]}`}
|
||||
transform="translate(-26223 -1404)"
|
||||
fill="#FDFDFD"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path
|
||||
id="path0_fill"
|
||||
id={ids[0]}
|
||||
d="M 33.7583 0.147461L 35.9766 0.147461C 37.0186 0.147461 37.7723 0.303223 38.2378 0.614746C 38.7033 0.92627 38.936 1.41862 38.936 2.0918C 38.936 2.55729 38.8053 2.94222 38.5439 3.24658C 38.2861 3.54736 37.9084 3.74251 37.4106 3.83203L 37.4106 3.88574C 38.603 4.08984 39.1992 4.71647 39.1992 5.76562C 39.1992 6.46745 38.9611 7.0153 38.4849 7.40918C 38.0122 7.80306 37.3498 8 36.4976 8L 33.7583 8L 33.7583 0.147461ZM 34.6714 3.50977L 36.1753 3.50977C 36.8198 3.50977 37.2835 3.40951 37.5664 3.20898C 37.8493 3.00488 37.9907 2.66292 37.9907 2.18311C 37.9907 1.74268 37.8332 1.42578 37.5181 1.23242C 37.203 1.03548 36.7017 0.937012 36.0142 0.937012L 34.6714 0.937012L 34.6714 3.50977ZM 34.6714 4.2832L 34.6714 7.22119L 36.3096 7.22119C 36.9434 7.22119 37.4196 7.09945 37.7383 6.85596C 38.0605 6.60889 38.2217 6.22396 38.2217 5.70117C 38.2217 5.21419 38.057 4.85612 37.7275 4.62695C 37.4017 4.39779 36.904 4.2832 36.2344 4.2832L 34.6714 4.2832ZM 43.2437 8.10742C 42.3735 8.10742 41.686 7.84245 41.1812 7.3125C 40.6799 6.78255 40.4292 6.04671 40.4292 5.10498C 40.4292 4.15609 40.6619 3.40234 41.1274 2.84375C 41.5965 2.28516 42.2249 2.00586 43.0127 2.00586C 43.7503 2.00586 44.334 2.24935 44.7637 2.73633C 45.1934 3.21973 45.4082 3.85889 45.4082 4.65381L 45.4082 5.21777L 41.353 5.21777C 41.3709 5.90885 41.5446 6.43343 41.874 6.7915C 42.207 7.14958 42.6743 7.32861 43.2759 7.32861C 43.9097 7.32861 44.5363 7.19613 45.1558 6.93115L 45.1558 7.72607C 44.8407 7.86214 44.5417 7.95882 44.2588 8.01611C 43.9795 8.07699 43.6411 8.10742 43.2437 8.10742ZM 43.002 2.75244C 42.5293 2.75244 42.1515 2.90641 41.8687 3.21436C 41.5894 3.5223 41.4246 3.94841 41.3745 4.49268L 44.4521 4.49268C 44.4521 3.9305 44.3268 3.50081 44.0762 3.20361C 43.8255 2.90283 43.4674 2.75244 43.002 2.75244ZM 48.835 7.37158C 48.9925 7.37158 49.1447 7.36084 49.2915 7.33936C 49.4383 7.31429 49.5547 7.28923 49.6406 7.26416L 49.6406 7.94629C 49.5439 7.99284 49.4007 8.03044 49.2109 8.05908C 49.0247 8.09131 48.8564 8.10742 48.7061 8.10742C 47.5674 8.10742 46.998 7.50765 46.998 6.30811L 46.998 2.80615L 46.1548 2.80615L 46.1548 2.37646L 46.998 2.00586L 47.374 0.749023L 47.8896 0.749023L 47.8896 2.11328L 49.5977 2.11328L 49.5977 2.80615L 47.8896 2.80615L 47.8896 6.27051C 47.8896 6.625 47.9738 6.89714 48.1421 7.08691C 48.3104 7.27669 48.5413 7.37158 48.835 7.37158ZM 54.4424 8L 54.2651 7.16211L 54.2222 7.16211C 53.9285 7.53092 53.6349 7.78158 53.3413 7.91406C 53.0513 8.04297 52.6878 8.10742 52.251 8.10742C 51.6673 8.10742 51.209 7.95703 50.876 7.65625C 50.5465 7.35547 50.3818 6.92757 50.3818 6.37256C 50.3818 5.18376 51.3325 4.56071 53.2339 4.50342L 54.2329 4.47119L 54.2329 4.10596C 54.2329 3.64404 54.1326 3.30387 53.9321 3.08545C 53.7352 2.86344 53.4183 2.75244 52.9814 2.75244C 52.4909 2.75244 51.9359 2.90283 51.3164 3.20361L 51.0425 2.52148C 51.3325 2.36393 51.6494 2.2404 51.9932 2.15088C 52.3405 2.06136 52.6878 2.0166 53.0352 2.0166C 53.737 2.0166 54.2562 2.17236 54.5928 2.48389C 54.9329 2.79541 55.103 3.29492 55.103 3.98242L 55.103 8L 54.4424 8ZM 52.4282 7.37158C 52.9832 7.37158 53.4183 7.2194 53.7334 6.91504C 54.0521 6.61068 54.2114 6.18457 54.2114 5.63672L 54.2114 5.10498L 53.3198 5.14258C 52.6108 5.16764 52.0988 5.27865 51.7837 5.47559C 51.4722 5.66895 51.3164 5.97152 51.3164 6.3833C 51.3164 6.70557 51.4131 6.95085 51.6064 7.11914C 51.8034 7.28743 52.0773 7.37158 52.4282 7.37158Z"
|
||||
/>
|
||||
<path
|
||||
id="path1_fill"
|
||||
id={ids[1]}
|
||||
fillRule="evenodd"
|
||||
d="M 81 9.49793C 81 4.25232 76.7461 5.90949e-07 71.5 5.90949e-07C 66.252 -0.00183046 62 4.25171 62 9.49793C 62 14.7435 66.2539 18.9958 71.5 18.9958C 76.7461 18.9958 81 14.7435 81 9.49793ZM 16.2266 0.99585L 0.773438 0.99585C 0.345703 0.99585 0 1.34168 0 1.76819L 0 4.86169C 0 5.09143 0.0996094 5.29773 0.259766 5.43921C 0.308594 5.48181 0.361328 5.51856 0.417969 5.54822C 0.523438 5.60303 0.644531 5.63403 0.773438 5.63403L 5.38281 5.63403C 5.80469 5.63391 6.14844 5.96997 6.15625 6.39026L 6.15625 17.2235C 6.15625 17.4979 6.29883 17.739 6.51562 17.876C 6.56445 17.9071 6.61719 17.9327 6.67383 17.9523L 6.78906 17.983C 6.83398 17.9915 6.88086 17.9958 6.92969 17.9958L 10.0215 17.9958C 10.4492 17.9958 10.7949 17.65 10.7949 17.2235L 10.7949 6.39026C 10.7949 5.96362 11.1406 5.61792 11.5684 5.61792L 16.248 5.61792C 16.4941 5.61145 16.7109 5.48962 16.8477 5.30469C 16.9414 5.17932 16.998 5.0249 17 4.85767L 17 1.76819C 17 1.34168 16.6543 0.99585 16.2266 0.99585ZM 33 1.76819L 33 4.86169C 33 5.28821 32.6504 5.63403 32.2168 5.63403L 25.4941 5.63403C 25.0605 5.63403 24.7109 5.97986 24.7109 6.40637L 24.7109 17.2235C 24.7109 17.65 24.3594 17.9958 23.9277 17.9958L 20.7871 17.9958C 20.5781 17.9969 20.3789 17.916 20.2305 17.771C 20.084 17.6261 20 17.4291 20 17.2235L 20 5.63001C 20.002 3.06995 22.1074 0.99585 24.7031 0.99585L 32.2168 0.99585C 32.6504 0.99585 33 1.34168 33 1.76819ZM 40.1719 0.99585L 36.834 0.99585C 36.6113 0.99585 36.4102 1.07593 36.2598 1.20654C 36.2188 1.24182 36.1816 1.28076 36.1504 1.32275L 36.0938 1.40906C 36.0352 1.51636 36 1.63855 36 1.76819L 36 17.2235C 36 17.65 36.373 17.9958 36.834 17.9958L 40.166 17.9958C 40.627 17.9958 41 17.65 41 17.2235L 41 1.76819C 41 1.34168 40.627 0.99585 40.1719 0.99585ZM 43.7715 0.99585L 59.2207 0.99585C 59.3535 0.99585 59.4785 1.02844 59.5879 1.08594C 59.7109 1.15112 59.8145 1.24829 59.8867 1.36633C 59.959 1.4834 60 1.62097 60 1.76819L 60 4.84546C 60 5.2721 59.6543 5.6178 59.2285 5.6178L 54.5664 5.6178C 54.1406 5.6178 53.7949 5.96362 53.7949 6.39026L 53.7949 17.2234C 53.7949 17.4678 53.6816 17.6857 53.5039 17.8271C 53.373 17.9326 53.2051 17.9957 53.0215 17.9957L 49.9297 17.9957C 49.7227 17.999 49.5234 17.9191 49.375 17.7739C 49.3105 17.7108 49.2598 17.6377 49.2207 17.5582C 49.1719 17.4547 49.1445 17.3405 49.1445 17.2234L 49.1445 6.39026C 49.1367 5.96997 48.793 5.63391 48.373 5.63403L 43.7715 5.63403C 43.3457 5.63403 43 5.28821 43 4.86169L 43 1.76819C 43 1.34168 43.3457 0.99585 43.7715 0.99585ZM 84 1.76819C 84 1.34168 84.3438 0.99585 84.7695 0.99585L 96.3809 0.99585C 98.9297 0.99585 100.998 3.06995 101 5.63001L 101 17.2235C 101 17.65 100.656 17.9958 100.23 17.9958L 97.1504 17.9958C 97.0039 17.9958 96.8691 17.9552 96.752 17.8846C 96.7148 17.8619 96.6797 17.8362 96.6465 17.8076C 96.584 17.7534 96.5312 17.6895 96.4883 17.618C 96.4199 17.5026 96.3809 17.3677 96.3809 17.2235L 96.3809 6.39026C 96.3809 5.96521 96.0391 5.62012 95.6152 5.61792L 89.3887 5.61792C 88.9648 5.61792 88.6191 5.96362 88.6191 6.39026L 88.6191 17.2235C 88.6191 17.65 88.2754 17.9958 87.8496 17.9958L 84.7695 17.9958C 84.5996 17.9958 84.4434 17.9408 84.3164 17.8474C 84.125 17.7069 84 17.4799 84 17.2235L 84 1.76819ZM 71.5 4.99585C 69.0156 4.99585 67 7.01062 67 9.49585C 67 11.9811 69.0156 13.9959 71.5 13.9959C 73.9844 13.9959 76 11.9811 76 9.49585C 75.998 7.01148 73.9844 4.99817 71.5 4.99585ZM 102.613 1.14209L 103 1.14209L 103 1.98145L 103.314 1.98145L 103.314 1.40503L 103.314 1.22925L 103.865 1.99585L 104.119 1.98145L 104.67 1.21777L 104.67 1.40503L 104.67 1.98145L 105 1.98145L 105 0.99585L 104.555 0.99585L 104.002 1.76245L 103.49 0.99585L 103 0.99585L 102 0.99585L 102 1.14209L 102.387 1.14209L 102.387 1.99585L 102.617 1.99585L 102.613 1.14209Z"
|
||||
/>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
const Triton = props => (
|
||||
const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<svg
|
||||
width="105"
|
||||
height="19"
|
||||
viewBox="0 0 105 19"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill="#FDFDFD"
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
fillRule="evenodd"
|
||||
d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
export default ({ beta = false, ...rest }) =>
|
||||
beta ? <TritonBeta {...rest} /> : <Triton {...rest} />;
|
||||
export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) =>
|
||||
beta ? (
|
||||
<TritonBeta style={{ ...style, ...rotateStyle }} {...rest} />
|
||||
) : (
|
||||
<Triton style={{ ...style, ...rotateStyle }} {...rest} />
|
||||
)
|
||||
}
|
||||
</Rotate>
|
||||
);
|
||||
|
||||
@ -1,12 +1,36 @@
|
||||
import React from 'react';
|
||||
import Colors from './colors';
|
||||
|
||||
export default ({ light = false, ...rest }) => (
|
||||
<Colors white secondary>
|
||||
{({ white, secondary }) => (
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" {...rest}>
|
||||
<path fill={light ? white : secondary} d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4A3.204 3.204 0 0 0 5.62 0z" />
|
||||
import Colors from './colors';
|
||||
import Rotate from './rotate';
|
||||
import calcFill from './fill';
|
||||
|
||||
export default ({
|
||||
fill = null,
|
||||
light = false,
|
||||
disabled = false,
|
||||
direction = 'down',
|
||||
style = {},
|
||||
...rest
|
||||
}) => (
|
||||
<Colors white text grey>
|
||||
{colors => (
|
||||
<Rotate direction={direction}>
|
||||
{({ style: rotateStyle }) => (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ ...style, ...rotateStyle }}
|
||||
{...rest}
|
||||
>
|
||||
<path
|
||||
fill={calcFill({ fill, disabled, light, colors })}
|
||||
d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4A3.204 3.204 0 0 0 5.62 0z"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Rotate>
|
||||
)}
|
||||
</Colors>
|
||||
);
|
||||
|
||||
@ -53,11 +53,7 @@ const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
||||
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||
const { H4, P } = require('../text');
|
||||
|
||||
const {
|
||||
Instances,
|
||||
Health,
|
||||
Actions
|
||||
} = require('../icons');
|
||||
const { Instances, Health, Actions } = require('../icons');
|
||||
|
||||
<Card shadow>
|
||||
<Header>
|
||||
@ -142,11 +138,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
|
||||
const { H4, P } = require('../text');
|
||||
const { default: StatusLoader } = require('../status-loader');
|
||||
|
||||
const {
|
||||
Actions,
|
||||
Instances,
|
||||
Health
|
||||
} = require('../icons');
|
||||
const { Actions, Instances, Health } = require('../icons');
|
||||
|
||||
[
|
||||
<Row>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const UL = styled.ul`
|
||||
padding: 0;
|
||||
|
||||
@ -1,5 +1,651 @@
|
||||
```js noeditor
|
||||
const React = require('react');
|
||||
const { List, Icon, ListItem } = require('./icons');
|
||||
const { default: Label } = require('../label');
|
||||
const { default: theme } = require('../theme');
|
||||
|
||||
<Icons/>
|
||||
const {
|
||||
Actions,
|
||||
Affinity,
|
||||
Arrow,
|
||||
Bin,
|
||||
Checkcircle,
|
||||
Clipboard,
|
||||
Close,
|
||||
Cns,
|
||||
DataCenter,
|
||||
Delete,
|
||||
Dot,
|
||||
Duplicate,
|
||||
Edit,
|
||||
Firewall,
|
||||
Health,
|
||||
Id,
|
||||
Import,
|
||||
InstanceCount,
|
||||
InstanceType,
|
||||
Instances,
|
||||
Loading,
|
||||
Login,
|
||||
Metadata,
|
||||
Minus,
|
||||
Network,
|
||||
Package,
|
||||
Plus,
|
||||
Reset,
|
||||
Start,
|
||||
Stop,
|
||||
Tags,
|
||||
Triton,
|
||||
User
|
||||
} = require('.');
|
||||
|
||||
<List>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Actions />
|
||||
</Icon>
|
||||
<Label>Actions > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Actions light />
|
||||
</Icon>
|
||||
<Label>Actions > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Actions disabled />
|
||||
</Icon>
|
||||
<Label>Actions > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Affinity />
|
||||
</Icon>
|
||||
<Label>Affinity > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Affinity light />
|
||||
</Icon>
|
||||
<Label>Affinity > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Affinity disabled />
|
||||
</Icon>
|
||||
<Label>Affinity > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow />
|
||||
</Icon>
|
||||
<Label>Arrow > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow direction="right" />
|
||||
</Icon>
|
||||
<Label>Arrow > Right</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow direction="up" />
|
||||
</Icon>
|
||||
<Label>Arrow > Up</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow direction="left" />
|
||||
</Icon>
|
||||
<Label>Arrow > left</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Arrow light />
|
||||
</Icon>
|
||||
<Label>Arrow > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow disabled />
|
||||
</Icon>
|
||||
<Label>Arrow > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Bin />
|
||||
</Icon>
|
||||
<Label>Bin > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark >
|
||||
<Bin light />
|
||||
</Icon>
|
||||
<Label>Bin > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Bin disabled />
|
||||
</Icon>
|
||||
<Label>Bin > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked />
|
||||
</Icon>
|
||||
<Label>Tick</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked fill />
|
||||
</Icon>
|
||||
<Label>Completed</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked border />
|
||||
</Icon>
|
||||
<Label>Part Completed</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle border />
|
||||
</Icon>
|
||||
<Label>Incomplete</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Close />
|
||||
</Icon>
|
||||
<Label>Close</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Clipboard />
|
||||
</Icon>
|
||||
<Label>Clipboard > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Clipboard light />
|
||||
</Icon>
|
||||
<Label>Clipboard > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Clipboard disabled />
|
||||
</Icon>
|
||||
<Label>Clipboard > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Cns />
|
||||
</Icon>
|
||||
<Label>CNS > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Cns light />
|
||||
</Icon>
|
||||
<Label>CNS > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Cns disabled />
|
||||
</Icon>
|
||||
<Label>CNS > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<DataCenter />
|
||||
</Icon>
|
||||
<Label>Data Centre > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<DataCenter light />
|
||||
</Icon>
|
||||
<Label>Data Centre > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<DataCenter disabled />
|
||||
</Icon>
|
||||
<Label>Data Centre > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Delete fill={theme.red} />
|
||||
</Icon>
|
||||
<Label>Delete > Red</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Delete light />
|
||||
</Icon>
|
||||
<Label>Delete > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Delete />
|
||||
</Icon>
|
||||
<Label>Delete > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Delete disabled />
|
||||
</Icon>
|
||||
<Label>Delete > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Dot color='primary' />
|
||||
</Icon>
|
||||
<Label>Dot > Primary</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Duplicate />
|
||||
</Icon>
|
||||
<Label>Duplicate > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Duplicate light />
|
||||
</Icon>
|
||||
<Label>Duplicate > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Duplicate disabled />
|
||||
</Icon>
|
||||
<Label>Duplicate > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Edit />
|
||||
</Icon>
|
||||
<Label>Edit > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Edit light />
|
||||
</Icon>
|
||||
<Label>Edit > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Edit disabled />
|
||||
</Icon>
|
||||
<Label>Edit > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Firewall />
|
||||
</Icon>
|
||||
<Label>Firewall > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Firewall light />
|
||||
</Icon>
|
||||
<Label>Firewall > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Firewall disabled />
|
||||
</Icon>
|
||||
<Label>Firewall > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Health />
|
||||
</Icon>
|
||||
<Label>Health > Healthy</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Health healthy={false} />
|
||||
</Icon>
|
||||
<Label>Health > Unhealthy</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Id />
|
||||
</Icon>
|
||||
<Label>Id > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Id light />
|
||||
</Icon>
|
||||
<Label>Id > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Id disabled />
|
||||
</Icon>
|
||||
<Label>Id > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Import />
|
||||
</Icon>
|
||||
<Label>Import</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<InstanceCount />
|
||||
</Icon>
|
||||
<Label>InstanceCount > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<InstanceCount light />
|
||||
</Icon>
|
||||
<Label>InstanceCount > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<InstanceCount disabled />
|
||||
</Icon>
|
||||
<Label>InstanceCount > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<InstanceType />
|
||||
</Icon>
|
||||
<Label>InstanceType > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<InstanceType light />
|
||||
</Icon>
|
||||
<Label>InstanceType > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<InstanceType disabled />
|
||||
</Icon>
|
||||
<Label>InstanceType > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Instances />
|
||||
</Icon>
|
||||
<Label>Instances > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Instances light />
|
||||
</Icon>
|
||||
<Label>Instances > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Instances disabled />
|
||||
</Icon>
|
||||
<Label>Instances > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Loading />
|
||||
</Icon>
|
||||
<Label>Loading > Primary</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Loading secondary />
|
||||
</Icon>
|
||||
<Label>Loading > Secondary</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Loading light />
|
||||
</Icon>
|
||||
<Label>Loading > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Loading disabled />
|
||||
</Icon>
|
||||
<Label>Loading > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Login />
|
||||
</Icon>
|
||||
<Label>Login > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Login light />
|
||||
</Icon>
|
||||
<Label>Login > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Login disabled />
|
||||
</Icon>
|
||||
<Label>Login > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Metadata />
|
||||
</Icon>
|
||||
<Label>Metadata > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Metadata light />
|
||||
</Icon>
|
||||
<Label>Metadata > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Metadata disabled />
|
||||
</Icon>
|
||||
<Label>Metadata > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Minus />
|
||||
</Icon>
|
||||
<Label>Minus > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Minus light />
|
||||
</Icon>
|
||||
<Label>Minus > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Minus disabled />
|
||||
</Icon>
|
||||
<Label>Minus > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Network />
|
||||
</Icon>
|
||||
<Label>Network > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Network light />
|
||||
</Icon>
|
||||
<Label>Network > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Network disabled />
|
||||
</Icon>
|
||||
<Label>Network > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Package />
|
||||
</Icon>
|
||||
<Label>Package > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Package light />
|
||||
</Icon>
|
||||
<Label>Package > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Package disabled />
|
||||
</Icon>
|
||||
<Label>Package > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Plus />
|
||||
</Icon>
|
||||
<Label>Plus > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Plus light />
|
||||
</Icon>
|
||||
<Label>Plus > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Plus disabled />
|
||||
</Icon>
|
||||
<Label>Plus > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Reset />
|
||||
</Icon>
|
||||
<Label>Reset > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Reset light />
|
||||
</Icon>
|
||||
<Label>Reset > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Reset disabled />
|
||||
</Icon>
|
||||
<Label>Reset > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Start />
|
||||
</Icon>
|
||||
<Label>Start > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Start light />
|
||||
</Icon>
|
||||
<Label>Start > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Start disabled />
|
||||
</Icon>
|
||||
<Label>Start > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Stop />
|
||||
</Icon>
|
||||
<Label>Stop > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Stop light />
|
||||
</Icon>
|
||||
<Label>Stop > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Stop disabled />
|
||||
</Icon>
|
||||
<Label>Stop > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Tags />
|
||||
</Icon>
|
||||
<Label>Tags > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Tags light />
|
||||
</Icon>
|
||||
<Label>Tags > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Tags disabled />
|
||||
</Icon>
|
||||
<Label>Tags > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Triton />
|
||||
</Icon>
|
||||
<Label>Triton > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Triton light />
|
||||
</Icon>
|
||||
<Label>Triton > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Triton disabled />
|
||||
</Icon>
|
||||
<Label>Triton > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Triton beta />
|
||||
</Icon>
|
||||
<Label>Triton Beta > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Triton beta light />
|
||||
</Icon>
|
||||
<Label>Triton Beta > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Triton beta disabled />
|
||||
</Icon>
|
||||
<Label>Triton Beta > Disabled</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<User />
|
||||
</Icon>
|
||||
<Label>User > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<User light />
|
||||
</Icon>
|
||||
<Label>User > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<User disabled />
|
||||
</Icon>
|
||||
<Label>User > Disabled</Label>
|
||||
</ListItem>
|
||||
</List>;
|
||||
```
|
||||
|
||||
@ -1,36 +1,15 @@
|
||||
import React from 'react';
|
||||
import is from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { default as Label } from '../label';
|
||||
|
||||
import {
|
||||
Actions,
|
||||
Arrow,
|
||||
Bin,
|
||||
Checkcircle,
|
||||
Chevron,
|
||||
Close,
|
||||
DataCenter,
|
||||
Health,
|
||||
Import,
|
||||
Instances,
|
||||
Loading,
|
||||
Minus,
|
||||
Plus,
|
||||
Triton,
|
||||
User
|
||||
} from './';
|
||||
|
||||
const List = styled.ul`
|
||||
export const List = styled.ul`
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Icon = styled.div`
|
||||
export const Icon = styled.div`
|
||||
width: ${remcalc(180)};
|
||||
height: ${remcalc(180)};
|
||||
border: ${remcalc(2)} solid ${props => props.theme.grey};
|
||||
@ -44,7 +23,7 @@ const Icon = styled.div`
|
||||
`};
|
||||
`;
|
||||
|
||||
const ListItem = styled.li`
|
||||
export const ListItem = styled.li`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -52,160 +31,3 @@ const ListItem = styled.li`
|
||||
flex-direction: column;
|
||||
margin-bottom: ${remcalc(53)};
|
||||
`;
|
||||
|
||||
const Icons = () => (
|
||||
<List>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Chevron width="6" />
|
||||
</Icon>
|
||||
<Label>Chevron</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Arrow width="6" light />
|
||||
</Icon>
|
||||
<Label>Arrow > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Arrow width="6" />
|
||||
</Icon>
|
||||
<Label>Arrow > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Instances width="18" />
|
||||
</Icon>
|
||||
<Label>Instances > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Instances width="18" light />
|
||||
</Icon>
|
||||
<Label>Instances > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Loading width="24" />
|
||||
</Icon>
|
||||
<Label>Loading</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Close width="9" height="13" />
|
||||
</Icon>
|
||||
<Label>Close</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Import width="24" height="24" />
|
||||
</Icon>
|
||||
<Label>Import</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Actions width="4" height="16" />
|
||||
</Icon>
|
||||
<Label>Actions > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Actions width="4" height="16" light />
|
||||
</Icon>
|
||||
<Label>Actions > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Plus />
|
||||
</Icon>
|
||||
<Label>Plus</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Minus />
|
||||
</Icon>
|
||||
<Label>Minus</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Health width="18" />
|
||||
</Icon>
|
||||
<Label>Healthy</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Health healthy={false} width="18" />
|
||||
</Icon>
|
||||
<Label>Unhealthy</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked width="9" />
|
||||
</Icon>
|
||||
<Label>Tick</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked fill width="18" />
|
||||
</Icon>
|
||||
<Label>Completed</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle checked border width="18" />
|
||||
</Icon>
|
||||
<Label>Part Completed</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Checkcircle border width="18" />
|
||||
</Icon>
|
||||
<Label>Incomplete</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<Bin width="18" />
|
||||
</Icon>
|
||||
<Label>Bin</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<User />
|
||||
</Icon>
|
||||
<Label>User > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<User light />
|
||||
</Icon>
|
||||
<Label>User > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
<DataCenter width="9" height="13" />
|
||||
</Icon>
|
||||
<Label>Data Centre > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<DataCenter width="9" height="13" light />
|
||||
</Icon>
|
||||
<Label>Data Centre > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Triton />
|
||||
</Icon>
|
||||
<Label>Triton Logo</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<Triton beta />
|
||||
</Icon>
|
||||
<Label>Triton Beta Logo</Label>
|
||||
</ListItem>
|
||||
</List>
|
||||
);
|
||||
|
||||
export default Icons;
|
||||
|
||||
@ -7,16 +7,32 @@ import {
|
||||
Bin as BaseBin,
|
||||
Checkcircle as BaseCheckcircle,
|
||||
Chevron as BaseChevron,
|
||||
Clipboard as BaseClipboard,
|
||||
Close as BaseClose,
|
||||
Cns as BaseCns,
|
||||
DataCenter as BaseDataCenter,
|
||||
Delete as BaseDelete,
|
||||
Dot as BaseDot,
|
||||
Duplicate as BaseDuplicate,
|
||||
Edit as BaseEdit,
|
||||
Firewall as BaseFirewall,
|
||||
Health as BaseHealth,
|
||||
Id as BaseId,
|
||||
Import as BaseImport,
|
||||
InstanceCount as BaseInstanceCount,
|
||||
InstanceType as BaseInstanceType,
|
||||
Instances as BaseInstances,
|
||||
Loading as BaseLoading,
|
||||
Login as BaseLogin,
|
||||
Metadata as BaseMetadata,
|
||||
Minus as BaseMinus,
|
||||
Network as BaseNetwork,
|
||||
Package as BasePackage,
|
||||
Plus as BasePlus,
|
||||
Reset as BaseReset,
|
||||
Start as BaseStart,
|
||||
Stop as BaseStop,
|
||||
Tags as BaseTags,
|
||||
Triton as BaseTriton,
|
||||
User as BaseUser
|
||||
} from 'joyent-icons';
|
||||
@ -27,15 +43,31 @@ export const Arrow = Baseline(BaseArrow);
|
||||
export const Bin = Baseline(BaseBin);
|
||||
export const Checkcircle = Baseline(BaseCheckcircle);
|
||||
export const Chevron = Baseline(BaseChevron);
|
||||
export const Clipboard = Baseline(BaseClipboard);
|
||||
export const Close = Baseline(BaseClose);
|
||||
export const Cns = Baseline(BaseCns);
|
||||
export const DataCenter = Baseline(BaseDataCenter);
|
||||
export const Delete = Baseline(BaseDelete);
|
||||
export const Dot = Baseline(BaseDot);
|
||||
export const Duplicate = Baseline(BaseDuplicate);
|
||||
export const Edit = Baseline(BaseEdit);
|
||||
export const Firewall = Baseline(BaseFirewall);
|
||||
export const Health = Baseline(BaseHealth);
|
||||
export const Id = Baseline(BaseId);
|
||||
export const Import = Baseline(BaseImport);
|
||||
export const InstanceCount = Baseline(BaseInstanceCount);
|
||||
export const InstanceType = Baseline(BaseInstanceType);
|
||||
export const Instances = Baseline(BaseInstances);
|
||||
export const Loading = Baseline(BaseLoading);
|
||||
export const Login = Baseline(BaseLogin);
|
||||
export const Metadata = Baseline(BaseMetadata);
|
||||
export const Minus = Baseline(BaseMinus);
|
||||
export const Network = Baseline(BaseNetwork);
|
||||
export const Package = Baseline(BasePackage);
|
||||
export const Plus = Baseline(BasePlus);
|
||||
export const Reset = Baseline(BaseReset);
|
||||
export const Start = Baseline(BaseStart);
|
||||
export const Stop = Baseline(BaseStop);
|
||||
export const Tags = Baseline(BaseTags);
|
||||
export const Triton = Baseline(BaseTriton);
|
||||
export const User = Baseline(BaseUser);
|
||||
|
||||
@ -92,18 +92,33 @@ export {
|
||||
Affinity as AffinityIcon,
|
||||
Arrow as ArrowIcon,
|
||||
Bin as BinIcon,
|
||||
Checkcircle,
|
||||
Chevron as ChevronIcon,
|
||||
Checkcircle as CheckcircleIcon,
|
||||
Clipboard as ClipboardIcon,
|
||||
Close as CloseIcon,
|
||||
Cns as CnsIcon,
|
||||
DataCenter as DataCenterIcon,
|
||||
Delete as DeleteIcon,
|
||||
Dot as DotIcon,
|
||||
Duplicate as DuplicateIcon,
|
||||
Edit as EditIcon,
|
||||
Firewall as FirewallIcon,
|
||||
Health as HealthIcon,
|
||||
Id as IdIcon,
|
||||
Import as ImportIcon,
|
||||
InstanceCount as InstanceCountIcon,
|
||||
InstanceType as InstanceTypeIcon,
|
||||
Instances as InstancesIcon,
|
||||
Loading as LoadingIcon,
|
||||
Login as LoginIcon,
|
||||
Metadata as MetadataIcon,
|
||||
Minus as MinusIcon,
|
||||
Network as NetworkIcon,
|
||||
Package as PackageIcon,
|
||||
Plus as PlusIcon,
|
||||
Reset as ResetIcon,
|
||||
Start as StartIcon,
|
||||
Stop as StopIcon,
|
||||
Tags as TagsIcon,
|
||||
Triton as TritonIcon,
|
||||
User as UserIcon
|
||||
} from './icons';
|
||||
|
||||
@ -59,6 +59,10 @@ module.exports = {
|
||||
{
|
||||
name: 'Colors',
|
||||
content: 'src/theme/colors.md'
|
||||
},
|
||||
{
|
||||
name: 'Icons',
|
||||
content: 'src/icons/Readme.md'
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -71,7 +75,6 @@ module.exports = {
|
||||
'src/button/index.js',
|
||||
'src/form/checkbox.js',
|
||||
'src/header/index.js',
|
||||
'src/icons/icons.js',
|
||||
'src/form/input.js',
|
||||
'src/message/index.js',
|
||||
'src/progress-bar/index.js',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user