diff options
| -rw-r--r-- | src/components/atoms/icons/feed.module.scss | 6 | ||||
| -rw-r--r-- | src/components/atoms/icons/feed.stories.tsx | 34 | ||||
| -rw-r--r-- | src/components/atoms/icons/feed.test.tsx | 9 | ||||
| -rw-r--r-- | src/components/atoms/icons/feed.tsx | 74 |
4 files changed, 123 insertions, 0 deletions
diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss new file mode 100644 index 0000000..56a5253 --- /dev/null +++ b/src/components/atoms/icons/feed.module.scss @@ -0,0 +1,6 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + width: var(--icon-size, #{fun.convert-px(40)}); +} diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx new file mode 100644 index 0000000..e3587a8 --- /dev/null +++ b/src/components/atoms/icons/feed.stories.tsx @@ -0,0 +1,34 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import FeedIcon from './feed'; + +/** + * Feed icon - Storybook Meta + */ +export default { + title: 'Atoms/Illustrations/Icons', + component: FeedIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta<typeof FeedIcon>; + +const Template: ComponentStory<typeof FeedIcon> = (args) => ( + <FeedIcon {...args} /> +); + +/** + * Icons Stories - Feed + */ +export const Feed = Template.bind({}); diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx new file mode 100644 index 0000000..fed9da9 --- /dev/null +++ b/src/components/atoms/icons/feed.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@test-utils'; +import Feed from './feed'; + +describe('Feed', () => { + it('renders a feed icon', () => { + const { container } = render(<Feed />); + expect(container).toBeDefined(); + }); +}); diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx new file mode 100644 index 0000000..6839abd --- /dev/null +++ b/src/components/atoms/icons/feed.tsx @@ -0,0 +1,74 @@ +import { FC } from 'react'; +import styles from './feed.module.scss'; + +export type FeedProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + +/** + * Feed Component + * + * Render a feed svg icon. + */ +const Feed: FC<FeedProps> = ({ className = '' }) => { + return ( + <svg + viewBox="0 0 256 256" + xmlns="http://www.w3.org/2000/svg" + className={`${styles.icon} ${className}`} + > + <defs> + <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg"> + <stop offset="0.0" stopColor="#E3702D" /> + <stop offset="0.1071" stopColor="#EA7D31" /> + <stop offset="0.3503" stopColor="#F69537" /> + <stop offset="0.5" stopColor="#FB9E3A" /> + <stop offset="0.7016" stopColor="#EA7C31" /> + <stop offset="0.8866" stopColor="#DE642B" /> + <stop offset="1.0" stopColor="#D95B29" /> + </linearGradient> + </defs> + <rect + width="256" + height="256" + rx="55" + ry="55" + x="0" + y="0" + fill="#CC5D15" + /> + <rect + width="246" + height="246" + rx="50" + ry="50" + x="5" + y="5" + fill="#F49C52" + /> + <rect + width="236" + height="236" + rx="47" + ry="47" + x="10" + y="10" + fill="url(#RSSg)" + /> + <circle cx="68" cy="189" r="24" fill="#FFF" /> + <path + d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" + fill="#FFF" + /> + <path + d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" + fill="#FFF" + /> + </svg> + ); +}; + +export default Feed; |
