Skip to content

Commit 1f519a9

Browse files
EranNLEranNL
authored
Merge pull request #15 from coderan-io/feature/icons
Feature/icons
2 parents 9536de2 + d5598a7 commit 1f519a9

21 files changed

+2160
-45
lines changed

‎__tests__/Icon.test.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { render } from 'enzyme';
2+
import { Icon } from '@/components';
3+
import React from 'react';
4+
5+
describe('Icon test', () => {
6+
it('should render icon', () => {
7+
const container = render(
8+
<div>
9+
<Icon icon="home"/>
10+
</div>
11+
);
12+
13+
expect(container.find('.cui-icon.cui-icon-home').length).toBe(1);
14+
});
15+
16+
it('should render icon with specific size', () => {
17+
const container = render(
18+
<div>
19+
<Icon icon="home" size={12} />
20+
</div>
21+
);
22+
23+
expect(container.find('.cui-icon.cui-icon-home.cui-icon-size-12').length).toBe(1);
24+
});
25+
});

‎package-lock.json

Lines changed: 3 additions & 35 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,6 @@
4040
"webpack-dev-server": "^3.11.0"
4141
},
4242
"dependencies": {
43-
"@fortawesome/fontawesome-free": "^5.15.1",
44-
"@fortawesome/fontawesome-svg-core": "^1.2.32",
45-
"@fortawesome/free-regular-svg-icons": "^5.15.1",
46-
"@fortawesome/react-fontawesome": "^0.1.11",
4743
"clsx": "^1.1.1",
4844
"react": "^17.0.1"
4945
}

‎src/components/Button/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Button = React.forwardRef<HTMLElement, ButtonProps>((
4545
{iconLeft}
4646
</div>
4747
)}
48-
<span>{children}</span>
48+
<span className="btn-text">{children}</span>
4949
{iconRight && (
5050
<div className="icon-container icon-right">
5151
{iconRight}

‎src/components/Icon/Icon.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
import PropTypes from 'prop-types';
3+
import clsx from 'clsx';
4+
import { IconName } from '@/components/Icon/IconName';
5+
6+
interface IconProps extends React.HTMLAttributes<HTMLElement> {
7+
icon: IconName | string;
8+
size?: string | number;
9+
}
10+
11+
const Icon = React.forwardRef<HTMLElement, IconProps>((
12+
{
13+
className,
14+
icon,
15+
size
16+
},
17+
ref
18+
): React.ReactElement => (
19+
<i
20+
ref={ref}
21+
className={clsx(
22+
'cui-icon',
23+
`cui-icon-${icon}`,
24+
size && `cui-icon-size-${size}`,
25+
className
26+
)}
27+
/>
28+
));
29+
30+
Icon.displayName = 'Icon';
31+
Icon.propTypes = {
32+
className: PropTypes.string,
33+
icon: PropTypes.string.isRequired,
34+
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
35+
}
36+
37+
export default Icon;

‎src/components/Icon/IconName.ts

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
export type IconName =
2+
| 'activity'
3+
| 'alert-circle'
4+
| 'alert-triangle'
5+
| 'archive'
6+
| 'arrow-left'
7+
| 'arrow-circle-down'
8+
| 'arrow-circle-left'
9+
| 'arrow-circle-right'
10+
| 'arrow-circle-up'
11+
| 'sort-down'
12+
| 'arrow-down'
13+
| 'arrow-right'
14+
| 'arrow-alt-left'
15+
| 'arrow-alt-down'
16+
| 'arrow-alt-right'
17+
| 'arrow-alt-up'
18+
| 'sort-left'
19+
| 'sort-right'
20+
| 'sort-up'
21+
| 'arrow-up'
22+
| 'chevron-double-down'
23+
| 'chevron-double-left'
24+
| 'chevron-double-right'
25+
| 'chevron-double-up'
26+
| 'at'
27+
| 'attach-2'
28+
| 'attach'
29+
| 'award'
30+
| 'backspace'
31+
| 'bar-chart-2'
32+
| 'bar-chart'
33+
| 'battery'
34+
| 'behance'
35+
| 'bell-off'
36+
| 'bell'
37+
| 'bluetooth'
38+
| 'book-open'
39+
| 'book'
40+
| 'bookmark'
41+
| 'briefcase'
42+
| 'browser'
43+
| 'brush'
44+
| 'bulb'
45+
| 'calendar'
46+
| 'camera'
47+
| 'car'
48+
| 'cast'
49+
| 'charging'
50+
| 'checkmark-circle-2'
51+
| 'checkmark-circle'
52+
| 'checkmark'
53+
| 'checkmark-square-2'
54+
| 'checkmark-square'
55+
| 'chevron-down'
56+
| 'chevron-left'
57+
| 'chevron-right'
58+
| 'chevron-up'
59+
| 'clipboard'
60+
| 'clock'
61+
| 'close-circle'
62+
| 'close'
63+
| 'close-square'
64+
| 'cloud-download'
65+
| 'cloud-upload'
66+
| 'code-download'
67+
| 'code'
68+
| 'collapse'
69+
| 'color-palette'
70+
| 'color-picker'
71+
| 'compass'
72+
| 'copy'
73+
| 'corner-down-left'
74+
| 'corner-down-right'
75+
| 'corner-left-down'
76+
| 'corner-left-up'
77+
| 'corner-right-down'
78+
| 'corner-right-up'
79+
| 'corner-up-left'
80+
| 'corner-up-right'
81+
| 'credit-card'
82+
| 'crop'
83+
| 'cube'
84+
| 'diagonal-arrow-left-down'
85+
| 'diagonal-arrow-left-up'
86+
| 'diagonal-arrow-right-down'
87+
| 'diagonal-arrow-right-up'
88+
| 'done-all'
89+
| 'download'
90+
| 'droplet-off'
91+
| 'droplet'
92+
| 'edit-2'
93+
| 'edit'
94+
| 'email'
95+
| 'expand'
96+
| 'external-link'
97+
| 'eye-off-2'
98+
| 'eye-off'
99+
| 'eye'
100+
| 'facebook'
101+
| 'file-add'
102+
| 'file'
103+
| 'file-remove'
104+
| 'file-text'
105+
| 'film'
106+
| 'flag'
107+
| 'flash-off'
108+
| 'flash'
109+
| 'flip-2'
110+
| 'flip'
111+
| 'folder-add'
112+
| 'folder'
113+
| 'folder-remove'
114+
| 'funnel'
115+
| 'gift'
116+
| 'github'
117+
| 'globe-2'
118+
| 'globe'
119+
| 'google'
120+
| 'grid'
121+
| 'hard-drive'
122+
| 'hash'
123+
| 'headphones'
124+
| 'heart'
125+
| 'home'
126+
| 'image'
127+
| 'inbox'
128+
| 'info'
129+
| 'keypad'
130+
| 'layers'
131+
| 'layout'
132+
| 'link-2'
133+
| 'link'
134+
| 'linkedin'
135+
| 'list'
136+
| 'loader'
137+
| 'lock'
138+
| 'log-in'
139+
| 'log-out'
140+
| 'map'
141+
| 'maximize'
142+
| 'menu-2'
143+
| 'menu-arrow'
144+
| 'menu'
145+
| 'message-circle'
146+
| 'message-square'
147+
| 'mic-off'
148+
| 'mic'
149+
| 'minimize'
150+
| 'minus-circle'
151+
| 'minus'
152+
| 'minus-square'
153+
| 'monitor'
154+
| 'moon'
155+
| 'more-horizontal'
156+
| 'more-vertical'
157+
| 'move'
158+
| 'music'
159+
| 'navigation-2'
160+
| 'navigation'
161+
| 'npm'
162+
| 'options-2'
163+
| 'options'
164+
| 'pantone'
165+
| 'paper-plane'
166+
| 'pause-circle'
167+
| 'people'
168+
| 'percent'
169+
| 'user-add'
170+
| 'user-delete'
171+
| 'user-done'
172+
| 'user'
173+
| 'user-remove'
174+
| 'phone-call'
175+
| 'phone-missed'
176+
| 'phone-off'
177+
| 'phone'
178+
| 'pie-chart'
179+
| 'pin'
180+
| 'play-circle'
181+
| 'plus-circle'
182+
| 'plus'
183+
| 'plus-square'
184+
| 'power'
185+
| 'pricetags'
186+
| 'printer'
187+
| 'question-mark-circle'
188+
| 'question-mark'
189+
| 'radio-button-off'
190+
| 'radio-button-on'
191+
| 'radio'
192+
| 'recording'
193+
| 'refresh'
194+
| 'repeat'
195+
| 'rewind-left'
196+
| 'rewind-right'
197+
| 'save'
198+
| 'scissors'
199+
| 'search'
200+
| 'settings-2'
201+
| 'settings'
202+
| 'shake'
203+
| 'share'
204+
| 'shield-off'
205+
| 'shield'
206+
| 'shopping-bag'
207+
| 'shopping-cart'
208+
| 'shuffle-2'
209+
| 'shuffle'
210+
| 'step-backward'
211+
| 'step-forward'
212+
| 'slash'
213+
| 'smartphone'
214+
| 'smiling-face'
215+
| 'speaker'
216+
| 'square'
217+
| 'star'
218+
| 'stop-circle'
219+
| 'sun'
220+
| 'swap'
221+
| 'sync'
222+
| 'text'
223+
| 'thermometer-minus'
224+
| 'thermometer'
225+
| 'thermometer-plus'
226+
| 'toggle-left'
227+
| 'toggle-right'
228+
| 'trash-2'
229+
| 'trash'
230+
| 'trending-down'
231+
| 'trending-up'
232+
| 'tv'
233+
| 'twitter'
234+
| 'umbrella'
235+
| 'undo'
236+
| 'unlock'
237+
| 'upload'
238+
| 'video-off'
239+
| 'video'
240+
| 'volume-down'
241+
| 'volume-mute'
242+
| 'volume-off'
243+
| 'volume-up'
244+
| 'wifi-off'
245+
| 'wifi';

‎src/components/Icon/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Icon } from './Icon';

‎src/components/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
export * from './Button';
12
export * from './Card';
23
export * from './Container';
34
export * from './Grid';
45
export * from './Page';
56
export * from './Panel';
7+
export * from './Icon';
68
export * from './utils';

‎src/fonts/icons/Cui-Icons.eot

63 KB
Binary file not shown.

0 commit comments

Comments
 (0)