Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit b5d4d21

Browse files
ryelleryelle
authored
Icons: add star and radio button icons, organize folder (#303)
* Split out icons into individual files, add radio icons * Add star icon * Fix SVG output in tests
1 parent 34f9a1f commit b5d4d21

File tree

10 files changed

+435
-1210
lines changed

10 files changed

+435
-1210
lines changed

‎assets/js/components/icons/checkbox-checked.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path
16+
fill="#1E8CBE"
17+
d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
18+
/>
19+
</svg>
20+
}
21+
/>
22+
);

‎assets/js/components/icons/checkbox-unchecked.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path
16+
fill="#6C7781"
17+
d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
18+
/>
19+
</svg>
20+
}
21+
/>
22+
);

‎assets/js/components/icons/index.js‎

Lines changed: 8 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,8 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import { Icon } from '@wordpress/components';
5-
6-
export const IconChecked = () => (
7-
<Icon
8-
icon={
9-
<svg
10-
viewBox="0 0 16 16"
11-
width="16"
12-
height="16"
13-
xmlns="http://www.w3.org/2000/svg"
14-
>
15-
<defs>
16-
<path
17-
id="checked"
18-
d="M15.2222 1H2.7778C1.791 1 1 1.8 1 2.7778v12.4444C1 16.2 1.7911 17 2.7778 17h12.4444C16.209 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2089 1 15.2222 1zm-8 12.4444L2.7778 9 4.031 7.7467l3.1911 3.1822 6.7467-6.7467 1.2533 1.2622-8 8z"
19-
/>
20-
</defs>
21-
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
22-
<mask id="checked-mask" fill="#fff">
23-
<use xlinkHref="#checked" />
24-
</mask>
25-
<path fill="#1E8CBE" d="M0 0h18v18H0z" mask="url(#checked-mask)" />
26-
</g>
27-
</svg>
28-
}
29-
/>
30-
);
31-
32-
export const IconUnchecked = () => (
33-
<Icon
34-
icon={
35-
<svg
36-
viewBox="0 0 16 16"
37-
width="16"
38-
height="16"
39-
xmlns="http://www.w3.org/2000/svg"
40-
>
41-
<defs>
42-
<path
43-
id="unchecked"
44-
d="M15.2222 2.7778v12.4444H2.7778V2.7778h12.4444zm0-1.7778H2.7778C1.8 1 1 1.8 1 2.7778v12.4444C1 16.2 1.8 17 2.7778 17h12.4444C16.2 17 17 16.2 17 15.2222V2.7778C17 1.8 16.2 1 15.2222 1z"
45-
/>
46-
</defs>
47-
<g fill="none" fillRule="evenodd" transform="translate(-1 -1)">
48-
<mask id="unchecked-mask" fill="#fff">
49-
<use xlinkHref="#unchecked" />
50-
</mask>
51-
<path fill="#6C7781" d="M0 0h18v18H0z" mask="url(#unchecked-mask)" />
52-
</g>
53-
</svg>
54-
}
55-
/>
56-
);
57-
58-
export const IconNewReleases = () => (
59-
<Icon
60-
icon={
61-
<svg
62-
xmlns="http://www.w3.org/2000/svg"
63-
width="24"
64-
height="24"
65-
viewBox="0 0 24 24"
66-
>
67-
<path d="M0 0h24v24H0z" fill="none" />
68-
<path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z" />
69-
</svg>
70-
}
71-
/>
72-
);
73-
74-
export const IconWidgets = () => (
75-
<Icon
76-
icon={
77-
<svg
78-
xmlns="http://www.w3.org/2000/svg"
79-
width="24"
80-
height="24"
81-
viewBox="0 0 24 24"
82-
>
83-
<path d="M13 13v8h8v-8h-8zM3 21h8v-8H3v8zM3 3v8h8V3H3zm13.66-1.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65z" />
84-
<path d="M0 0h24v24H0z" fill="none" />
85-
</svg>
86-
}
87-
/>
88-
);
1+
// Export each icon as a named component.
2+
export { default as IconCheckChecked } from './checkbox-checked';
3+
export { default as IconCheckUnchecked } from './checkbox-unchecked';
4+
export { default as IconNewReleases } from './new-releases';
5+
export { default as IconRadioSelected } from './radio-selected';
6+
export { default as IconRadioUnselected } from './radio-unselected';
7+
export { default as IconStar } from './star';
8+
export { default as IconWidgets } from './widgets';

‎assets/js/components/icons/new-releases.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path d="M0 0h24v24H0z" fill="none" />
16+
<path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z" />
17+
</svg>
18+
}
19+
/>
20+
);

‎assets/js/components/icons/radio-selected.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path fill="#1E8CBE" d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
16+
</svg>
17+
}
18+
/>
19+
);

‎assets/js/components/icons/radio-unselected.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path
16+
fill="#6C7781"
17+
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
18+
/>
19+
</svg>
20+
}
21+
/>
22+
);

‎assets/js/components/icons/star.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="18"
12+
height="18"
13+
viewBox="0 0 18 18"
14+
>
15+
<path d="M9 11.3l3.71 2.7-1.42-4.36L15 7h-4.55L9 2.5 7.55 7H3l3.71 2.64L5.29 14z" />
16+
<path fill="none" d="M0 0h18v18H0z" />
17+
</svg>
18+
}
19+
/>
20+
);

‎assets/js/components/icons/widgets.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
6+
export default () => (
7+
<Icon
8+
icon={
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
width="24"
12+
height="24"
13+
viewBox="0 0 24 24"
14+
>
15+
<path d="M13 13v8h8v-8h-8zM3 21h8v-8H3v8zM3 3v8h8V3H3zm13.66-1.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65z" />
16+
<path d="M0 0h24v24H0z" fill="none" />
17+
</svg>
18+
}
19+
/>
20+
);

‎assets/js/components/search-list-control/item.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
88
/**
99
* Internal dependencies
1010
*/
11-
import { IconChecked, IconUnchecked } from '../icons';
11+
import { IconCheckChecked, IconCheckUnchecked } from '../icons';
1212

1313
function getHighlightedName( name, search ) {
1414
if ( ! search ) {
@@ -53,7 +53,7 @@ const SearchListItem = ( {
5353
{ ...props }
5454
>
5555
<span className="woocommerce-search-list__item-state">
56-
{ isSelected ? <IconChecked /> : <IconUnchecked /> }
56+
{ isSelected ? <IconCheckChecked /> : <IconCheckUnchecked /> }
5757
</span>
5858

5959
<span className="woocommerce-search-list__item-label">

0 commit comments

Comments
 (0)