src/js/components/Spinner/stories/CustomThemed/ThemedIcon.tsx
import React from 'react';
import { Box, Grommet, Spinner } from 'grommet';
import { Node } from 'grommet-icons';
import { ThemeType } from 'grommet/themes';
// Type annotations can only be used in TypeScript files.
// Remove ': ThemeType' if you are not using Typescript.
const themeWithAnimation: ThemeType = {
spinner: {
icon: Node,
container: {
color: 'accent-2',
align: 'center',
justify: 'center',
size: 'large',
animation: { type: 'rotateLeft', duration: 900 },
},
},
};
// Type annotations can only be used in TypeScript files.
// Remove ': ThemeType' if you are not using Typescript.
const themeWithAnimatedIcon: ThemeType = {
spinner: {
icon: (
<svg
version="1.1"
viewBox="0 0 32 32"
width="32px"
height="32px"
fill="#333333"
>
<path
opacity=".25"
d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28
A12 12 0 0 1 16 4"
/>
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
<animateTransform
attributeName="transform"
type="rotate"
from="0 16 16"
to="360 16 16"
dur="0.8s"
repeatCount="indefinite"
/>
</path>
</svg>
),
container: { size: 'large', animation: undefined },
},
};
export const ThemedIcon = () => (
<>
<Grommet theme={themeWithAnimation}>
<Box pad="large">
<Spinner />
</Box>
</Grommet>
<Grommet theme={themeWithAnimatedIcon}>
<Box pad="large">
<Spinner />
</Box>
</Grommet>
</>
);
ThemedIcon.storyName = 'Themed Icon';
export default {
title: 'Visualizations/Spinner/Custom Themed/Themed Icon',
};