@transferwise/icons 4.4.5 → 4.5.0

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 (48) hide show
  1. package/README.md +18 -0
  2. package/build/components/ach.tsx +1 -1
  3. package/build/components/activity.tsx +1 -1
  4. package/build/components/arrow-diagonal-down.tsx +1 -1
  5. package/build/components/arrow-diagonal-up.tsx +1 -1
  6. package/build/components/arrow-end.tsx +52 -0
  7. package/build/components/arrow-start.tsx +52 -0
  8. package/build/components/bank-transfer.tsx +1 -1
  9. package/build/components/bills.tsx +1 -1
  10. package/build/components/chair.tsx +52 -0
  11. package/build/components/chevron-end.tsx +52 -0
  12. package/build/components/chevron-start.tsx +52 -0
  13. package/build/components/delivery.tsx +1 -1
  14. package/build/components/help-circle.tsx +1 -1
  15. package/build/components/help.tsx +1 -1
  16. package/build/components/list.tsx +1 -1
  17. package/build/components/log-in.tsx +1 -1
  18. package/build/components/log-out.tsx +1 -1
  19. package/build/components/navigate-away.tsx +1 -1
  20. package/build/components/question-mark-circle-fill.tsx +1 -1
  21. package/build/components/question-mark-circle.tsx +1 -1
  22. package/build/components/question-mark.tsx +1 -1
  23. package/build/components/sim-card.tsx +52 -0
  24. package/build/components/switch.tsx +1 -1
  25. package/build/components/transfer.tsx +1 -1
  26. package/build/icons.json +143 -18
  27. package/build/index.ts +6 -0
  28. package/build/rtl.css +9 -0
  29. package/lib/components/arrow-end.d.ts +13 -0
  30. package/lib/components/arrow-end.d.ts.map +1 -0
  31. package/lib/components/arrow-start.d.ts +13 -0
  32. package/lib/components/arrow-start.d.ts.map +1 -0
  33. package/lib/components/chair.d.ts +13 -0
  34. package/lib/components/chair.d.ts.map +1 -0
  35. package/lib/components/chevron-end.d.ts +13 -0
  36. package/lib/components/chevron-end.d.ts.map +1 -0
  37. package/lib/components/chevron-start.d.ts +13 -0
  38. package/lib/components/chevron-start.d.ts.map +1 -0
  39. package/lib/components/sim-card.d.ts +13 -0
  40. package/lib/components/sim-card.d.ts.map +1 -0
  41. package/lib/index.d.ts +6 -0
  42. package/lib/index.d.ts.map +1 -1
  43. package/lib/index.esm.js +2795 -2581
  44. package/lib/index.esm.js.map +1 -1
  45. package/lib/index.js +2800 -2580
  46. package/lib/index.js.map +1 -1
  47. package/lib/styles/main.min.css +1 -1
  48. package/package.json +2 -2
package/README.md CHANGED
@@ -105,6 +105,24 @@ The CSS rule `color` cascades to the `<svg>` shapes, because each inline SVG sha
105
105
  }
106
106
  ```
107
107
 
108
+ # RTL (right-to-left) support
109
+
110
+ Some icons are automatically mirrored when rendered in an RTL locale such as Arabic or Hebrew. This is handled via CSS using `:lang()` selectors, so **your app must set the `lang` attribute** on an ancestor element (typically `<html>`) for mirroring to take effect:
111
+
112
+ ```html
113
+ <html lang="ar" dir="rtl">
114
+ ```
115
+
116
+ No additional props or configuration are needed — icons that should be mirrored will flip automatically when `lang` is set.
117
+
118
+ ### Locale-specific behaviour
119
+
120
+ Not all RTL icons mirror for every locale. For example, question mark icons (`QuestionMark`, `QuestionMarkCircle`) are only mirrored for Arabic, because the Arabic script uses a mirrored question mark glyph (؟) while Hebrew uses the standard western one (?).
121
+
122
+ Support for new RTL locales propagates automatically from the [wise-atoms](https://github.com/transferwise/wise-atoms) `_metadata.json` — no changes in this repo are needed.
123
+
124
+ You can check which icons have RTL variants and for which locales in the [live demo](https://transferwise.github.io/icons/) — they are marked with a pink badge. Use the locale picker to preview mirroring.
125
+
108
126
  # Accessibility
109
127
 
110
128
  Each React icon component has an optional `title` property in case your icon has a semantic meaning, use this property, so it will be visible for Screen Readers.
package/build/components/ach.tsx CHANGED
@@ -28,7 +28,7 @@ export const Ach: React.FunctionComponent<AchIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-ach ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-ach rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'ach-icon'}
33
33
  >
34
34
  <svg
package/build/components/activity.tsx CHANGED
@@ -28,7 +28,7 @@ export const Activity: React.FunctionComponent<ActivityIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-activity ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-activity rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'activity-icon'}
33
33
  >
34
34
  <svg
package/build/components/arrow-diagonal-down.tsx CHANGED
@@ -28,7 +28,7 @@ export const ArrowDiagonalDown: React.FunctionComponent<ArrowDiagonalDownIconPro
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-arrow-diagonal-down ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-arrow-diagonal-down rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'arrow-diagonal-down-icon'}
33
33
  >
34
34
  <svg
package/build/components/arrow-diagonal-up.tsx CHANGED
@@ -28,7 +28,7 @@ export const ArrowDiagonalUp: React.FunctionComponent<ArrowDiagonalUpIconProps>
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-arrow-diagonal-up ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-arrow-diagonal-up rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'arrow-diagonal-up-icon'}
33
33
  >
34
34
  <svg
package/build/components/arrow-end.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface ArrowEndIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const ArrowEnd: React.FunctionComponent<ArrowEndIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<ArrowEnd filled /> is now deprecated, please use <ArrowEndFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-arrow-end rtl-ar rtl-he ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'arrow-end-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="m18.586 11-6.293-6.293 1.414-1.414 7.993 7.993a1.01 1.01 0 0 1 0 1.428l-7.993 7.993-1.414-1.414L18.586 13H2v-2z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/arrow-start.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface ArrowStartIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const ArrowStart: React.FunctionComponent<ArrowStartIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<ArrowStart filled /> is now deprecated, please use <ArrowStartFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-arrow-start rtl-ar rtl-he ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'arrow-start-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/bank-transfer.tsx CHANGED
@@ -28,7 +28,7 @@ export const BankTransfer: React.FunctionComponent<BankTransferIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-bank-transfer ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-bank-transfer rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'bank-transfer-icon'}
33
33
  >
34
34
  <svg
package/build/components/bills.tsx CHANGED
@@ -28,7 +28,7 @@ export const Bills: React.FunctionComponent<BillsIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-bills ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-bills rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'bills-icon'}
33
33
  >
34
34
  <svg
package/build/components/chair.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface ChairIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const Chair: React.FunctionComponent<ChairIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<Chair filled /> is now deprecated, please use <ChairFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-chair ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'chair-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="M17 3a2 2 0 0 1 2 2v3a2 2 0 0 1 2 2v7a2 2 0 0 1-1.796 1.99L19 19v2h-2v-2H7v2H5v-2l-.204-.01A2 2 0 0 1 3 17v-7a2 2 0 0 1 2-2V5a2 2 0 0 1 2-2zM5 17h14v-7h-2v4h-.005a1.1 1.1 0 0 1-1.095 1H8.1a1.1 1.1 0 0 1-1.095-1H7v-4H5zm2-9a2 2 0 0 1 2 2v3h6v-3a2 2 0 0 1 2-2V5H7z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/chevron-end.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface ChevronEndIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const ChevronEnd: React.FunctionComponent<ChevronEndIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<ChevronEnd filled /> is now deprecated, please use <ChevronEndFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-chevron-end rtl-ar rtl-he ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'chevron-end-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="M15.586 12 8.293 4.707l1.414-1.414 7.993 7.993a1.01 1.01 0 0 1 0 1.428l-7.993 7.993-1.414-1.414z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/chevron-start.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface ChevronStartIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const ChevronStart: React.FunctionComponent<ChevronStartIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<ChevronStart filled /> is now deprecated, please use <ChevronStartFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-chevron-start rtl-ar rtl-he ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'chevron-start-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="m8.414 12 7.293-7.293-1.414-1.414L6.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/delivery.tsx CHANGED
@@ -28,7 +28,7 @@ export const Delivery: React.FunctionComponent<DeliveryIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-delivery ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-delivery rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'delivery-icon'}
33
33
  >
34
34
  <svg
package/build/components/help-circle.tsx CHANGED
@@ -28,7 +28,7 @@ export const HelpCircle: React.FunctionComponent<HelpCircleIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-help-circle ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-help-circle rtl-ar ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'help-circle-icon'}
33
33
  >
34
34
  <svg
package/build/components/help.tsx CHANGED
@@ -28,7 +28,7 @@ export const Help: React.FunctionComponent<HelpIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-help ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-help rtl-ar ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'help-icon'}
33
33
  >
34
34
  <svg
package/build/components/list.tsx CHANGED
@@ -28,7 +28,7 @@ export const List: React.FunctionComponent<ListIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-list ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-list rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'list-icon'}
33
33
  >
34
34
  <svg
package/build/components/log-in.tsx CHANGED
@@ -28,7 +28,7 @@ export const LogIn: React.FunctionComponent<LogInIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-log-in ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-log-in rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'log-in-icon'}
33
33
  >
34
34
  <svg
package/build/components/log-out.tsx CHANGED
@@ -28,7 +28,7 @@ export const LogOut: React.FunctionComponent<LogOutIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-log-out ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-log-out rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'log-out-icon'}
33
33
  >
34
34
  <svg
package/build/components/navigate-away.tsx CHANGED
@@ -28,7 +28,7 @@ export const NavigateAway: React.FunctionComponent<NavigateAwayIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-navigate-away ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-navigate-away rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'navigate-away-icon'}
33
33
  >
34
34
  <svg
package/build/components/question-mark-circle-fill.tsx CHANGED
@@ -28,7 +28,7 @@ export const QuestionMarkCircleFill: React.FunctionComponent<QuestionMarkCircleF
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-question-mark-circle-fill ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-question-mark-circle-fill rtl-ar ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'question-mark-circle-fill-icon'}
33
33
  >
34
34
  <svg
package/build/components/question-mark-circle.tsx CHANGED
@@ -28,7 +28,7 @@ export const QuestionMarkCircle: React.FunctionComponent<QuestionMarkCircleIconP
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-question-mark-circle ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-question-mark-circle rtl-ar ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'question-mark-circle-icon'}
33
33
  >
34
34
  <svg
package/build/components/question-mark.tsx CHANGED
@@ -28,7 +28,7 @@ export const QuestionMark: React.FunctionComponent<QuestionMarkIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-question-mark ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-question-mark rtl-ar ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'question-mark-icon'}
33
33
  >
34
34
  <svg
package/build/components/sim-card.tsx ADDED
@@ -0,0 +1,52 @@
1
+
2
+ // This is an automatically generated file, please don't edit it
3
+ import { IconSize } from '../types';
4
+
5
+ export interface SimCardIconProps {
6
+ description?: string;
7
+ isFocusable?: boolean;
8
+ size?: IconSize;
9
+ filled?: boolean;
10
+ className?: string;
11
+ title?: string;
12
+ ['data-testid']?: string;
13
+ role?: React.AriaRole;
14
+ }
15
+
16
+ export const SimCard: React.FunctionComponent<SimCardIconProps> = ({
17
+ className = undefined,
18
+ isFocusable = false,
19
+ filled = undefined,
20
+ title = undefined,
21
+ role = undefined,
22
+ size = 16,
23
+ ...restProps
24
+ }) => {
25
+ if (filled) {
26
+ console.warn("<SimCard filled /> is now deprecated, please use <SimCardFill /> or refer to https://transferwise.github.io/icons/ for more info.");
27
+ }
28
+
29
+ return (
30
+ <span
31
+ className={`tw-icon tw-icon-sim-card ${className ? className : ''}`}
32
+ data-testid={restProps['data-testid'] || 'sim-card-icon'}
33
+ >
34
+ <svg
35
+ aria-label={title}
36
+ aria-hidden={!title ? true : undefined}
37
+ focusable={isFocusable}
38
+ role={role ?? (title ? 'graphics-symbol img' : 'none')}
39
+ width={String(size)}
40
+ height={String(size)}
41
+ fill="currentColor"
42
+ viewBox="0 0 24 24"
43
+ >
44
+ {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
45
+ <>
46
+ <path fillRule="evenodd" d="M14.9 8A1.1 1.1 0 0 1 16 9.1v5.8a1.1 1.1 0 0 1-1.1 1.1H7.1A1.1 1.1 0 0 1 6 14.9V9.1A1.1 1.1 0 0 1 7.1 8zM12 14h2v-4h-2zm-4 0h2v-4H8z" clipRule="evenodd"/><path fillRule="evenodd" d="M16.586 4A2 2 0 0 1 18 4.586L21.414 8A2 2 0 0 1 22 9.414V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM4 18h16V9.414L16.586 6H4z" clipRule="evenodd"/>
47
+ </>
48
+ )}
49
+ </svg>
50
+ </span>
51
+ )
52
+ }
package/build/components/switch.tsx CHANGED
@@ -28,7 +28,7 @@ export const Switch: React.FunctionComponent<SwitchIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-switch ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-switch rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'switch-icon'}
33
33
  >
34
34
  <svg
package/build/components/transfer.tsx CHANGED
@@ -28,7 +28,7 @@ export const Transfer: React.FunctionComponent<TransferIconProps> = ({
28
28
 
29
29
  return (
30
30
  <span
31
- className={`tw-icon tw-icon-transfer ${className ? className : ''}`}
31
+ className={`tw-icon tw-icon-transfer rtl-ar rtl-he ${className ? className : ''}`}
32
32
  data-testid={restProps['data-testid'] || 'transfer-icon'}
33
33
  >
34
34
  <svg