@digigov/react-icons 2.0.0-85c27c19 → 2.0.0-8e254888

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/AccessibilityIcon/config/index.js +4 -2
  2. package/AccessibilityIcon/config.js.map +2 -2
  3. package/ArrowIcon/config/index.js +26 -1
  4. package/ArrowIcon/config.js.map +2 -2
  5. package/BurgerIcon/config/index.js +30 -4
  6. package/BurgerIcon/config.d.ts +2 -2
  7. package/BurgerIcon/config.js.map +2 -2
  8. package/CancelIcon/config/index.js +8 -1
  9. package/CancelIcon/config.js.map +2 -2
  10. package/CaretIcon/config/index.js +2 -1
  11. package/CaretIcon/config.js.map +2 -2
  12. package/ChatIcon/config/index.js +8 -1
  13. package/ChatIcon/config.js.map +2 -2
  14. package/CheckIcon/config/index.js +8 -1
  15. package/CheckIcon/config.js.map +2 -2
  16. package/ChevronIcon/config/index.js +26 -1
  17. package/ChevronIcon/config.js.map +2 -2
  18. package/CloseIcon/config/index.js +8 -1
  19. package/CloseIcon/config.js.map +2 -2
  20. package/DownloadIcon/config/index.js +8 -1
  21. package/DownloadIcon/config.js.map +2 -2
  22. package/ExclamationIcon/config/index.js +8 -1
  23. package/ExclamationIcon/config.js.map +2 -2
  24. package/GlobeIcon/config/index.js +8 -1
  25. package/GlobeIcon/config.js.map +2 -2
  26. package/Icon/index.d.ts +1 -1
  27. package/Icon/index.js +1 -1
  28. package/Icon/index.js.map +2 -2
  29. package/{Base → IconBase}/index.d.ts +6 -6
  30. package/{Base → IconBase}/index.js +5 -4
  31. package/IconBase/index.js.map +7 -0
  32. package/{Base → IconBase}/package.json +1 -1
  33. package/LockIcon/config/index.js +8 -1
  34. package/LockIcon/config.js.map +2 -2
  35. package/LoginIcon/config/index.js +14 -1
  36. package/LoginIcon/config.js.map +2 -2
  37. package/MinusIcon/config/index.js +2 -1
  38. package/MinusIcon/config.js.map +2 -2
  39. package/MoreVertIcon/config/index.js +2 -1
  40. package/MoreVertIcon/config.js.map +2 -2
  41. package/PdfFileIcon/config/index.js +20 -1
  42. package/PdfFileIcon/config.js.map +2 -2
  43. package/PlusIcon/config/index.js +8 -1
  44. package/PlusIcon/config.js.map +2 -2
  45. package/PrintIcon/config/index.js +8 -1
  46. package/PrintIcon/config.js.map +2 -2
  47. package/ReplyIcon/config/index.js +8 -1
  48. package/ReplyIcon/config.js.map +2 -2
  49. package/RestoreIcon/config/index.js +8 -1
  50. package/RestoreIcon/config.js.map +2 -2
  51. package/SearchIcon/config/index.js +8 -1
  52. package/SearchIcon/config.js.map +2 -2
  53. package/SvgIcon/index.d.ts +2 -2
  54. package/SvgIcon/index.js +2 -2
  55. package/SvgIcon/index.js.map +2 -2
  56. package/UncheckIcon/config/index.js +8 -1
  57. package/UncheckIcon/config.js.map +2 -2
  58. package/cjs/AccessibilityIcon/config/index.js +4 -2
  59. package/cjs/AccessibilityIcon/config.js.map +3 -3
  60. package/cjs/ArrowIcon/config/index.js +26 -1
  61. package/cjs/ArrowIcon/config.js.map +3 -3
  62. package/cjs/BurgerIcon/config/index.js +30 -4
  63. package/cjs/BurgerIcon/config.js.map +3 -3
  64. package/cjs/CancelIcon/config/index.js +8 -1
  65. package/cjs/CancelIcon/config.js.map +3 -3
  66. package/cjs/CaretIcon/config/index.js +2 -1
  67. package/cjs/CaretIcon/config.js.map +3 -3
  68. package/cjs/ChatIcon/config/index.js +8 -1
  69. package/cjs/ChatIcon/config.js.map +3 -3
  70. package/cjs/CheckIcon/config/index.js +8 -1
  71. package/cjs/CheckIcon/config.js.map +3 -3
  72. package/cjs/ChevronIcon/config/index.js +26 -1
  73. package/cjs/ChevronIcon/config.js.map +3 -3
  74. package/cjs/CloseIcon/config/index.js +8 -1
  75. package/cjs/CloseIcon/config.js.map +3 -3
  76. package/cjs/DownloadIcon/config/index.js +8 -1
  77. package/cjs/DownloadIcon/config.js.map +3 -3
  78. package/cjs/ExclamationIcon/config/index.js +8 -1
  79. package/cjs/ExclamationIcon/config.js.map +3 -3
  80. package/cjs/GlobeIcon/config/index.js +8 -1
  81. package/cjs/GlobeIcon/config.js.map +3 -3
  82. package/cjs/Icon/index.js +1 -1
  83. package/cjs/Icon/index.js.map +2 -2
  84. package/cjs/{Base → IconBase}/index.js +9 -8
  85. package/cjs/IconBase/index.js.map +7 -0
  86. package/cjs/LockIcon/config/index.js +8 -1
  87. package/cjs/LockIcon/config.js.map +3 -3
  88. package/cjs/LoginIcon/config/index.js +14 -1
  89. package/cjs/LoginIcon/config.js.map +3 -3
  90. package/cjs/MinusIcon/config/index.js +2 -1
  91. package/cjs/MinusIcon/config.js.map +3 -3
  92. package/cjs/MoreVertIcon/config/index.js +2 -1
  93. package/cjs/MoreVertIcon/config.js.map +3 -3
  94. package/cjs/PdfFileIcon/config/index.js +20 -1
  95. package/cjs/PdfFileIcon/config.js.map +3 -3
  96. package/cjs/PlusIcon/config/index.js +8 -1
  97. package/cjs/PlusIcon/config.js.map +3 -3
  98. package/cjs/PrintIcon/config/index.js +8 -1
  99. package/cjs/PrintIcon/config.js.map +3 -3
  100. package/cjs/ReplyIcon/config/index.js +8 -1
  101. package/cjs/ReplyIcon/config.js.map +3 -3
  102. package/cjs/RestoreIcon/config/index.js +8 -1
  103. package/cjs/RestoreIcon/config.js.map +3 -3
  104. package/cjs/SearchIcon/config/index.js +8 -1
  105. package/cjs/SearchIcon/config.js.map +3 -3
  106. package/cjs/SvgIcon/index.js +2 -2
  107. package/cjs/SvgIcon/index.js.map +3 -3
  108. package/cjs/UncheckIcon/config/index.js +8 -1
  109. package/cjs/UncheckIcon/config.js.map +3 -3
  110. package/cjs/icons.js.map +1 -1
  111. package/cjs/lazy/index.js +7 -7
  112. package/cjs/lazy.js.map +3 -3
  113. package/cjs/registry/index.js +54 -8
  114. package/cjs/registry.js.map +3 -3
  115. package/icons.d.ts +11 -11
  116. package/icons.js.map +1 -1
  117. package/index.js +1 -1
  118. package/lazy/index.js +28 -32
  119. package/package.json +2 -2
  120. package/registry/index.js +86 -41
  121. package/src/AccessibilityIcon/__snapshots__/index.test.tsx.snap +126 -27
  122. package/src/AccessibilityIcon/config.tsx +5 -3
  123. package/src/AccessibilityIcon/index.test.tsx +12 -4
  124. package/src/ArrowIcon/__snapshots__/index.test.tsx.snap +13 -1
  125. package/src/ArrowIcon/config.tsx +17 -4
  126. package/src/BurgerIcon/__snapshots__/index.test.tsx.snap +53 -5
  127. package/src/BurgerIcon/config.tsx +24 -7
  128. package/src/BurgerIcon/index.test.tsx +6 -2
  129. package/src/CancelIcon/__snapshots__/index.test.tsx.snap +28 -7
  130. package/src/CancelIcon/config.tsx +5 -1
  131. package/src/CancelIcon/index.test.tsx +6 -2
  132. package/src/CaretIcon/__snapshots__/index.test.tsx.snap +13 -1
  133. package/src/CaretIcon/config.tsx +5 -4
  134. package/src/ChatIcon/__snapshots__/index.test.tsx.snap +31 -7
  135. package/src/ChatIcon/config.tsx +6 -2
  136. package/src/ChatIcon/index.test.tsx +7 -3
  137. package/src/CheckIcon/__snapshots__/index.test.tsx.snap +32 -8
  138. package/src/CheckIcon/config.tsx +5 -1
  139. package/src/CheckIcon/index.test.tsx +6 -2
  140. package/src/ChevronIcon/__snapshots__/index.test.tsx.snap +13 -1
  141. package/src/ChevronIcon/config.tsx +17 -4
  142. package/src/ChevronIcon/index.test.tsx +6 -2
  143. package/src/CloseIcon/__snapshots__/index.test.tsx.snap +4 -1
  144. package/src/CloseIcon/config.tsx +5 -1
  145. package/src/DownloadIcon/__snapshots__/index.test.tsx.snap +70 -14
  146. package/src/DownloadIcon/config.tsx +8 -4
  147. package/src/DownloadIcon/index.test.tsx +9 -3
  148. package/src/ExclamationIcon/__snapshots__/index.test.tsx.snap +42 -7
  149. package/src/ExclamationIcon/config.tsx +6 -2
  150. package/src/ExclamationIcon/index.test.tsx +12 -4
  151. package/src/GlobeIcon/__snapshots__/index.test.tsx.snap +16 -4
  152. package/src/GlobeIcon/config.tsx +5 -1
  153. package/src/GlobeIcon/index.test.tsx +3 -1
  154. package/src/Icon/__snapshots__/index.test.tsx.snap +40 -1
  155. package/src/Icon/index.test.tsx +3 -1
  156. package/src/Icon/index.tsx +1 -1
  157. package/src/{Base → IconBase}/index.tsx +10 -9
  158. package/src/LockIcon/__snapshots__/index.test.tsx.snap +28 -7
  159. package/src/LockIcon/config.tsx +5 -1
  160. package/src/LockIcon/index.test.tsx +6 -2
  161. package/src/LoginIcon/__snapshots__/index.test.tsx.snap +42 -7
  162. package/src/LoginIcon/config.tsx +9 -2
  163. package/src/LoginIcon/index.test.tsx +6 -2
  164. package/src/MinusIcon/__snapshots__/index.test.tsx.snap +28 -7
  165. package/src/MinusIcon/config.tsx +3 -2
  166. package/src/MinusIcon/index.test.tsx +6 -2
  167. package/src/MoreVertIcon/__snapshots__/index.test.tsx.snap +72 -9
  168. package/src/MoreVertIcon/config.tsx +4 -3
  169. package/src/MoreVertIcon/index.test.tsx +12 -4
  170. package/src/PdfFileIcon/__snapshots__/index.test.tsx.snap +126 -21
  171. package/src/PdfFileIcon/config.tsx +18 -8
  172. package/src/PdfFileIcon/index.test.tsx +6 -2
  173. package/src/PlusIcon/__snapshots__/index.test.tsx.snap +28 -7
  174. package/src/PlusIcon/config.tsx +5 -1
  175. package/src/PlusIcon/index.test.tsx +6 -2
  176. package/src/PrintIcon/__snapshots__/index.test.tsx.snap +42 -7
  177. package/src/PrintIcon/config.tsx +6 -2
  178. package/src/PrintIcon/index.test.tsx +6 -2
  179. package/src/ReplyIcon/__snapshots__/index.test.tsx.snap +28 -7
  180. package/src/ReplyIcon/config.tsx +5 -1
  181. package/src/ReplyIcon/index.test.tsx +6 -2
  182. package/src/RestoreIcon/__snapshots__/index.test.tsx.snap +56 -7
  183. package/src/RestoreIcon/config.tsx +7 -3
  184. package/src/RestoreIcon/index.test.tsx +6 -2
  185. package/src/SearchIcon/__snapshots__/index.test.tsx.snap +4 -1
  186. package/src/SearchIcon/config.tsx +5 -1
  187. package/src/SvgIcon/__snapshots__/index.test.tsx.snap +34 -17
  188. package/src/SvgIcon/index.tsx +4 -4
  189. package/src/UncheckIcon/__snapshots__/index.test.tsx.snap +36 -9
  190. package/src/UncheckIcon/config.tsx +5 -1
  191. package/src/UncheckIcon/index.test.tsx +6 -2
  192. package/src/icons.ts +11 -12
  193. package/src/lazy.js +28 -29
  194. package/src/registry.js +78 -34
  195. package/Base/index.js.map +0 -7
  196. package/cjs/Base/index.js.map +0 -7
  197. package/lazy.d.ts +0 -29
  198. package/lazy.js.map +0 -7
  199. package/registry.d.ts +0 -31
  200. package/registry.js.map +0 -7
@@ -1,13 +1,17 @@
1
1
  import React from 'react';
2
+ import IconBase from '@digigov/react-icons/IconBase';
2
3
 
3
4
  export interface DownloadType {}
4
5
 
5
6
  export function download(): React.ReactElement {
6
7
  return (
7
- <g>
8
- <polygon points="12 18 20 10 15.3 10 15.3 2 8.7 2 8.7 10 4 10 12 18"/>
9
- <rect x="6" y="18.699" width="12" height="3.301"/>
10
- </g>
8
+ <IconBase as="g">
9
+ <IconBase
10
+ as="polygon"
11
+ points="12 18 20 10 15.3 10 15.3 2 8.7 2 8.7 10 4 10 12 18"
12
+ />
13
+ <IconBase as="rect" x="6" y="18.699" width="12" height="3.301" />
14
+ </IconBase>
11
15
  );
12
16
  }
13
17
 
@@ -16,11 +16,17 @@ it('renders the DownloadIcon with prop color=white', () => {
16
16
  expect(render(<DownloadIcon color="white" />).baseElement).toMatchSnapshot();
17
17
  });
18
18
  it('renders the DownloadIcon with prop color=warning', () => {
19
- expect(render(<DownloadIcon color="warning" />).baseElement).toMatchSnapshot();
19
+ expect(
20
+ render(<DownloadIcon color="warning" />).baseElement
21
+ ).toMatchSnapshot();
20
22
  });
21
23
  it('renders the DownloadIcon with prop color=warning and size=s', () => {
22
- expect(render(<DownloadIcon color="warning" size="sm" />).baseElement).toMatchSnapshot();
24
+ expect(
25
+ render(<DownloadIcon color="warning" size="sm" />).baseElement
26
+ ).toMatchSnapshot();
23
27
  });
24
28
  it('renders the DownloadIcon with prop color=error and size= xl', () => {
25
- expect(render(<DownloadIcon color="warning" size="xl" />).baseElement).toMatchSnapshot();
29
+ expect(
30
+ render(<DownloadIcon color="warning" size="xl" />).baseElement
31
+ ).toMatchSnapshot();
26
32
  });
@@ -1,18 +1,23 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`renders the ExclamationIcon with no props 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <svg
7
7
  aria-hidden="true"
8
+ as="svg"
8
9
  class="ds-svg-icon--exclamation ds-svg-icon"
9
10
  focusable="false"
10
11
  viewBox="0 0 24 24"
11
12
  >
12
13
  <path
14
+ as="path"
15
+ class=""
13
16
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
14
17
  />
15
18
  <circle
19
+ as="circle"
20
+ class=""
16
21
  cx="11.993"
17
22
  cy="19.9"
18
23
  r="2.1"
@@ -27,14 +32,19 @@ exports[`renders the ExclamationIcon with prop color=error and size=sm 1`] = `
27
32
  <div>
28
33
  <svg
29
34
  aria-hidden="true"
30
- class="ds-svg-icon--exclamation ds-svg-icon--error ds-svg-icon--sm ds-svg-icon"
35
+ as="svg"
36
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--error ds-svg-icon--sm"
31
37
  focusable="false"
32
38
  viewBox="0 0 24 24"
33
39
  >
34
40
  <path
41
+ as="path"
42
+ class=""
35
43
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
36
44
  />
37
45
  <circle
46
+ as="circle"
47
+ class=""
38
48
  cx="11.993"
39
49
  cy="19.9"
40
50
  r="2.1"
@@ -49,14 +59,19 @@ exports[`renders the ExclamationIcon with prop color=info and size= xl 1`] = `
49
59
  <div>
50
60
  <svg
51
61
  aria-hidden="true"
52
- class="ds-svg-icon--exclamation ds-svg-icon--info ds-svg-icon--xl ds-svg-icon"
62
+ as="svg"
63
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--info ds-svg-icon--xl"
53
64
  focusable="false"
54
65
  viewBox="0 0 24 24"
55
66
  >
56
67
  <path
68
+ as="path"
69
+ class=""
57
70
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
58
71
  />
59
72
  <circle
73
+ as="circle"
74
+ class=""
60
75
  cx="11.993"
61
76
  cy="19.9"
62
77
  r="2.1"
@@ -71,14 +86,19 @@ exports[`renders the ExclamationIcon with prop color=warning 1`] = `
71
86
  <div>
72
87
  <svg
73
88
  aria-hidden="true"
74
- class="ds-svg-icon--exclamation ds-svg-icon--warning ds-svg-icon"
89
+ as="svg"
90
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--warning"
75
91
  focusable="false"
76
92
  viewBox="0 0 24 24"
77
93
  >
78
94
  <path
95
+ as="path"
96
+ class=""
79
97
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
80
98
  />
81
99
  <circle
100
+ as="circle"
101
+ class=""
82
102
  cx="11.993"
83
103
  cy="19.9"
84
104
  r="2.1"
@@ -93,14 +113,19 @@ exports[`renders the ExclamationIcon with prop color=white 1`] = `
93
113
  <div>
94
114
  <svg
95
115
  aria-hidden="true"
96
- class="ds-svg-icon--exclamation ds-svg-icon--white ds-svg-icon"
116
+ as="svg"
117
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--white"
97
118
  focusable="false"
98
119
  viewBox="0 0 24 24"
99
120
  >
100
121
  <path
122
+ as="path"
123
+ class=""
101
124
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
102
125
  />
103
126
  <circle
127
+ as="circle"
128
+ class=""
104
129
  cx="11.993"
105
130
  cy="19.9"
106
131
  r="2.1"
@@ -115,14 +140,19 @@ exports[`renders the ExclamationIcon with prop size=md 1`] = `
115
140
  <div>
116
141
  <svg
117
142
  aria-hidden="true"
118
- class="ds-svg-icon--exclamation ds-svg-icon--md ds-svg-icon"
143
+ as="svg"
144
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--md"
119
145
  focusable="false"
120
146
  viewBox="0 0 24 24"
121
147
  >
122
148
  <path
149
+ as="path"
150
+ class=""
123
151
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
124
152
  />
125
153
  <circle
154
+ as="circle"
155
+ class=""
126
156
  cx="11.993"
127
157
  cy="19.9"
128
158
  r="2.1"
@@ -137,14 +167,19 @@ exports[`renders the ExclamationIcon with prop size=xl 1`] = `
137
167
  <div>
138
168
  <svg
139
169
  aria-hidden="true"
140
- class="ds-svg-icon--exclamation ds-svg-icon--xl ds-svg-icon"
170
+ as="svg"
171
+ class="ds-svg-icon--exclamation ds-svg-icon ds-svg-icon--xl"
141
172
  focusable="false"
142
173
  viewBox="0 0 24 24"
143
174
  >
144
175
  <path
176
+ as="path"
177
+ class=""
145
178
  d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
146
179
  />
147
180
  <circle
181
+ as="circle"
182
+ class=""
148
183
  cx="11.993"
149
184
  cy="19.9"
150
185
  r="2.1"
@@ -1,12 +1,16 @@
1
1
  import React from 'react';
2
+ import IconBase from '@digigov/react-icons/IconBase';
2
3
 
3
4
  export interface ExclamationType {}
4
5
 
5
6
  export function exclamation(): React.ReactElement {
6
7
  return (
7
8
  <>
8
- <path d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z" />
9
- <circle cx="11.993" cy="19.9" r="2.1" />
9
+ <IconBase
10
+ as="path"
11
+ d="M13.716,16.486h-3.446l-.488-14.486h4.422l-.488,14.486Z"
12
+ />
13
+ <IconBase as="circle" cx="11.993" cy="19.9" r="2.1" />
10
14
  </>
11
15
  );
12
16
  }
@@ -13,14 +13,22 @@ it('renders the ExclamationIcon with prop size=xl', () => {
13
13
  expect(render(<ExclamationIcon size="xl" />).baseElement).toMatchSnapshot();
14
14
  });
15
15
  it('renders the ExclamationIcon with prop color=white', () => {
16
- expect(render(<ExclamationIcon color="white" />).baseElement).toMatchSnapshot();
16
+ expect(
17
+ render(<ExclamationIcon color="white" />).baseElement
18
+ ).toMatchSnapshot();
17
19
  });
18
20
  it('renders the ExclamationIcon with prop color=warning', () => {
19
- expect(render(<ExclamationIcon color="warning" />).baseElement).toMatchSnapshot();
21
+ expect(
22
+ render(<ExclamationIcon color="warning" />).baseElement
23
+ ).toMatchSnapshot();
20
24
  });
21
25
  it('renders the ExclamationIcon with prop color=error and size=sm', () => {
22
- expect(render(<ExclamationIcon color="error" size="sm" />).baseElement).toMatchSnapshot();
26
+ expect(
27
+ render(<ExclamationIcon color="error" size="sm" />).baseElement
28
+ ).toMatchSnapshot();
23
29
  });
24
30
  it('renders the ExclamationIcon with prop color=info and size= xl', () => {
25
- expect(render(<ExclamationIcon color="info" size="xl" />).baseElement).toMatchSnapshot();
31
+ expect(
32
+ render(<ExclamationIcon color="info" size="xl" />).baseElement
33
+ ).toMatchSnapshot();
26
34
  });
@@ -1,15 +1,18 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`renders the GlobeIcon prop color= "error" 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <svg
7
7
  aria-hidden="true"
8
- class="ds-svg-icon--globe ds-svg-icon--error ds-svg-icon"
8
+ as="svg"
9
+ class="ds-svg-icon--globe ds-svg-icon ds-svg-icon--error"
9
10
  focusable="false"
10
11
  viewBox="0 0 24 24"
11
12
  >
12
13
  <path
14
+ as="path"
15
+ class=""
13
16
  d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
14
17
  />
15
18
  </svg>
@@ -22,11 +25,14 @@ exports[`renders the GlobeIcon prop color= "white" 1`] = `
22
25
  <div>
23
26
  <svg
24
27
  aria-hidden="true"
25
- class="ds-svg-icon--globe ds-svg-icon--white ds-svg-icon"
28
+ as="svg"
29
+ class="ds-svg-icon--globe ds-svg-icon ds-svg-icon--white"
26
30
  focusable="false"
27
31
  viewBox="0 0 24 24"
28
32
  >
29
33
  <path
34
+ as="path"
35
+ class=""
30
36
  d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
31
37
  />
32
38
  </svg>
@@ -39,11 +45,14 @@ exports[`renders the GlobeIcon with no props 1`] = `
39
45
  <div>
40
46
  <svg
41
47
  aria-hidden="true"
48
+ as="svg"
42
49
  class="ds-svg-icon--globe ds-svg-icon"
43
50
  focusable="false"
44
51
  viewBox="0 0 24 24"
45
52
  >
46
53
  <path
54
+ as="path"
55
+ class=""
47
56
  d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
48
57
  />
49
58
  </svg>
@@ -56,11 +65,14 @@ exports[`renders the GlobeIcon with prop color=base-content 1`] = `
56
65
  <div>
57
66
  <svg
58
67
  aria-hidden="true"
59
- class="ds-svg-icon--globe ds-svg-icon--base-content ds-svg-icon"
68
+ as="svg"
69
+ class="ds-svg-icon--globe ds-svg-icon ds-svg-icon--base-content"
60
70
  focusable="false"
61
71
  viewBox="0 0 24 24"
62
72
  >
63
73
  <path
74
+ as="path"
75
+ class=""
64
76
  d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
65
77
  />
66
78
  </svg>
@@ -1,11 +1,15 @@
1
1
  import React from 'react';
2
+ import IconBase from '@digigov/react-icons/IconBase';
2
3
 
3
4
  export interface GlobeType {}
4
5
 
5
6
  export function globe(): React.ReactElement {
6
7
  return (
7
8
  <>
8
- <path d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z" />
9
+ <IconBase
10
+ as="path"
11
+ d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
12
+ />
9
13
  </>
10
14
  );
11
15
  }
@@ -8,7 +8,9 @@ it('renders the GlobeIcon with no props', () => {
8
8
  });
9
9
 
10
10
  it('renders the GlobeIcon with prop color=base-content', () => {
11
- expect(render(<GlobeIcon color="base-content" />).baseElement).toMatchSnapshot();
11
+ expect(
12
+ render(<GlobeIcon color="base-content" />).baseElement
13
+ ).toMatchSnapshot();
12
14
  });
13
15
 
14
16
  it('renders the GlobeIcon prop color= "white"', () => {
@@ -1,15 +1,18 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
3
  exports[`renders the Icon prop icon= "caret" 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <svg
7
7
  aria-hidden="true"
8
+ as="svg"
8
9
  class="ds-svg-icon--caret ds-svg-icon"
9
10
  focusable="false"
10
11
  viewBox="0 0 24 24"
11
12
  >
12
13
  <path
14
+ as="path"
15
+ class=""
13
16
  d="M18,22V2L6,12L18,22z"
14
17
  />
15
18
  </svg>
@@ -22,11 +25,14 @@ exports[`renders the Icon prop icon= "caret" and direction=left 1`] = `
22
25
  <div>
23
26
  <svg
24
27
  aria-hidden="true"
28
+ as="svg"
25
29
  class="ds-svg-icon--caret ds-svg-icon"
26
30
  focusable="false"
27
31
  viewBox="0 0 24 24"
28
32
  >
29
33
  <path
34
+ as="path"
35
+ class=""
30
36
  d="M18,22V2L6,12L18,22z"
31
37
  />
32
38
  </svg>
@@ -39,11 +45,14 @@ exports[`renders the Icon prop icon= "check" 1`] = `
39
45
  <div>
40
46
  <svg
41
47
  aria-hidden="true"
48
+ as="svg"
42
49
  class="ds-svg-icon--check ds-svg-icon"
43
50
  focusable="false"
44
51
  viewBox="0 0 24 24"
45
52
  >
46
53
  <polygon
54
+ as="polygon"
55
+ class=""
47
56
  points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
48
57
  />
49
58
  </svg>
@@ -56,11 +65,14 @@ exports[`renders the Icon prop icon= "close" 1`] = `
56
65
  <div>
57
66
  <svg
58
67
  aria-hidden="true"
68
+ as="svg"
59
69
  class="ds-svg-icon--close ds-svg-icon"
60
70
  focusable="false"
61
71
  viewBox="0 0 24 24"
62
72
  >
63
73
  <polygon
74
+ as="polygon"
75
+ class=""
64
76
  points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
65
77
  />
66
78
  </svg>
@@ -73,11 +85,14 @@ exports[`renders the Icon prop icon= "uncheck" 1`] = `
73
85
  <div>
74
86
  <svg
75
87
  aria-hidden="true"
88
+ as="svg"
76
89
  class="ds-svg-icon--uncheck ds-svg-icon"
77
90
  focusable="false"
78
91
  viewBox="0 0 24 24"
79
92
  >
80
93
  <polygon
94
+ as="polygon"
95
+ class=""
81
96
  points="20.59 5.74 18.26 3.41 12 9.67 5.742 3.41 3.41 5.74 9.67 12 3.41 18.26 5.74 20.6 12 14.33 18.26 20.59 20.59 18.26 14.33 12 20.59 5.74"
82
97
  />
83
98
  </svg>
@@ -90,21 +105,28 @@ exports[`renders the Icon props icon= "moreVert" 1`] = `
90
105
  <div>
91
106
  <svg
92
107
  aria-hidden="true"
108
+ as="svg"
93
109
  class="ds-svg-icon--moreVert ds-svg-icon"
94
110
  focusable="false"
95
111
  viewBox="0 0 24 24"
96
112
  >
97
113
  <circle
114
+ as="circle"
115
+ class=""
98
116
  cx="12"
99
117
  cy="5"
100
118
  r="2"
101
119
  />
102
120
  <circle
121
+ as="circle"
122
+ class=""
103
123
  cx="12"
104
124
  cy="12"
105
125
  r="2"
106
126
  />
107
127
  <circle
128
+ as="circle"
129
+ class=""
108
130
  cx="12"
109
131
  cy="19"
110
132
  r="2"
@@ -119,11 +141,14 @@ exports[`renders the Icon with no props 1`] = `
119
141
  <div>
120
142
  <svg
121
143
  aria-hidden="true"
144
+ as="svg"
122
145
  class="ds-svg-icon--chevron ds-svg-icon"
123
146
  focusable="false"
124
147
  viewBox="0 0 24 24"
125
148
  >
126
149
  <path
150
+ as="path"
151
+ class=""
127
152
  d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
128
153
  />
129
154
  </svg>
@@ -136,11 +161,14 @@ exports[`renders the Icon with prop icon=arrow and direction=up 1`] = `
136
161
  <div>
137
162
  <svg
138
163
  aria-hidden="true"
164
+ as="svg"
139
165
  class="ds-svg-icon--chevron ds-svg-icon"
140
166
  focusable="false"
141
167
  viewBox="0 0 24 24"
142
168
  >
143
169
  <path
170
+ as="path"
171
+ class=""
144
172
  d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
145
173
  />
146
174
  </svg>
@@ -153,24 +181,32 @@ exports[`renders the Icon with prop prop icon=burger 1`] = `
153
181
  <div>
154
182
  <svg
155
183
  aria-hidden="true"
184
+ as="svg"
156
185
  class="ds-svg-icon--burger ds-svg-icon"
157
186
  focusable="false"
158
187
  viewBox="0 0 24 24"
159
188
  >
160
189
  <g
190
+ as="g"
161
191
  class=""
162
192
  >
163
193
  <rect
194
+ as="rect"
195
+ class=""
164
196
  height="3.3"
165
197
  id="ds-svg-icon--burger__line-1"
166
198
  width="20"
167
199
  />
168
200
  <rect
201
+ as="rect"
202
+ class=""
169
203
  height="3.3"
170
204
  id="ds-svg-icon--burger__line-2"
171
205
  width="20"
172
206
  />
173
207
  <rect
208
+ as="rect"
209
+ class=""
174
210
  height="3.3"
175
211
  id="ds-svg-icon--burger__line-3"
176
212
  width="20"
@@ -186,11 +222,14 @@ exports[`renders the Icon with prop prop icon=globe 1`] = `
186
222
  <div>
187
223
  <svg
188
224
  aria-hidden="true"
225
+ as="svg"
189
226
  class="ds-svg-icon--globe ds-svg-icon"
190
227
  focusable="false"
191
228
  viewBox="0 0 24 24"
192
229
  >
193
230
  <path
231
+ as="path"
232
+ class=""
194
233
  d="M12,1C5.925,1,1,5.925,1,12s4.925,11,11,11,11-4.925,11-11S18.075,1,12,1ZM19.203,7.7h-2.6c-.236-1.22-.572-2.32-.98-3.267,1.49.716,2.735,1.857,3.58,3.267ZM20.4,12c0,.582-.06,1.151-.173,1.7h-3.292c.039-.556.066-1.12.066-1.7s-.026-1.145-.066-1.7h3.292c.113.549.173,1.118.173,1.7ZM12,20.378c-.484-.265-1.393-1.667-1.943-4.078h3.885c-.55,2.411-1.459,3.814-1.943,4.078ZM9.667,13.7c-.042-.537-.068-1.103-.068-1.7s.025-1.163.068-1.7h4.665c.042.537.068,1.103.068,1.7s-.025,1.163-.068,1.7h-4.665ZM3.6,12c0-.582.06-1.151.173-1.7h3.292c-.039.556-.066,1.12-.066,1.7s.026,1.145.066,1.7h-3.292c-.113-.549-.173-1.118-.173-1.7ZM12,3.622c.484.265,1.393,1.667,1.943,4.079h-3.885c.55-2.411,1.459-3.814,1.943-4.079ZM8.377,4.433c-.409.947-.745,2.047-.98,3.267h-2.6c.845-1.411,2.09-2.551,3.58-3.267ZM4.797,16.3h2.6c.236,1.22.572,2.32.98,3.267-1.49-.716-2.735-1.857-3.58-3.267ZM15.623,19.567c.409-.947.745-2.047.98-3.267h2.6c-.845,1.411-2.09,2.551-3.58,3.267Z"
195
234
  />
196
235
  </svg>
@@ -17,7 +17,9 @@ it('renders the Icon prop icon= "caret"', () => {
17
17
  expect(render(<Icon icon="caret" />).baseElement).toMatchSnapshot();
18
18
  });
19
19
  it('renders the Icon prop icon= "caret" and direction=left', () => {
20
- expect(render(<Icon icon="caret" direction="left" />).baseElement).toMatchSnapshot();
20
+ expect(
21
+ render(<Icon icon="caret" direction="left" />).baseElement
22
+ ).toMatchSnapshot();
21
23
  });
22
24
  it('renders the Icon prop icon= "check"', () => {
23
25
  expect(render(<Icon icon="check" />).baseElement).toMatchSnapshot();
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import clsx from 'clsx';
3
- import SvgIcon, { SvgIconProps } from '@digigov/react-icons/SvgIcon';
4
3
  import * as icons from '@digigov/react-icons/icons';
5
4
  import type { IconTypes } from '@digigov/react-icons/icons';
5
+ import SvgIcon, { SvgIconProps } from '@digigov/react-icons/SvgIcon';
6
6
 
7
7
  export type IconProps<N extends keyof IconTypes> = SvgIconProps &
8
8
  IconTypes[N] & {
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import clsx from 'clsx';
3
3
 
4
- type AsProp<C extends React.ElementType> = {
4
+ interface AsProp<C extends React.ElementType> {
5
5
  as?: C;
6
- };
6
+ }
7
7
 
8
8
  type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
9
9
 
@@ -14,7 +14,7 @@ type PolymorphicComponentProp<
14
14
  > = React.PropsWithChildren<Props & AsProp<C>> &
15
15
  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
16
16
 
17
- // This is a new type utitlity with ref!
17
+ // This is a new type utility with ref!
18
18
  type PolymorphicComponentPropWithRef<
19
19
  C extends React.ElementType,
20
20
  Props = Record<string, unknown>,
@@ -27,7 +27,7 @@ type PolymorphicRef<C extends React.ElementType> =
27
27
  /**
28
28
  * This is the updated component props using PolymorphicComponentPropWithRef
29
29
  */
30
- export type BaseProps<C extends React.ElementType> =
30
+ export type IconBaseProps<C extends React.ElementType> =
31
31
  PolymorphicComponentPropWithRef<
32
32
  C,
33
33
  {
@@ -147,11 +147,11 @@ type spacingValues =
147
147
  /**
148
148
  * This is the type used in the type annotation for the component
149
149
  */
150
- type BaseComponent = <C extends React.ElementType = 'span'>(
151
- props: BaseProps<C>
150
+ type IconBaseComponent = <C extends React.ElementType = 'span'>(
151
+ props: IconBaseProps<C>
152
152
  ) => React.ReactNode | null;
153
153
 
154
- export const Base: BaseComponent = React.forwardRef(function Base<
154
+ export const IconBase: IconBaseComponent = React.forwardRef(function Base<
155
155
  C extends React.ElementType = 'span',
156
156
  >(
157
157
  {
@@ -196,13 +196,14 @@ export const Base: BaseComponent = React.forwardRef(function Base<
196
196
  children,
197
197
  className,
198
198
  ...props
199
- }: BaseProps<C>,
199
+ }: IconBaseProps<C>,
200
200
  ref?: PolymorphicRef<C>
201
201
  ) {
202
202
  const Component = as || 'span';
203
203
 
204
204
  return (
205
205
  <Component
206
+ as={as}
206
207
  className={clsx(className, {
207
208
  [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
208
209
  [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
@@ -254,4 +255,4 @@ export const Base: BaseComponent = React.forwardRef(function Base<
254
255
  );
255
256
  });
256
257
 
257
- export default Base;
258
+ export default IconBase;