@transferwise/icons 3.0.4 → 3.0.7
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.
- package/README.md +10 -12
- package/lib/angular/components/ach-icon.component.d.ts +3 -0
- package/lib/angular/components/activity-icon.component.d.ts +3 -0
- package/lib/angular/components/alert-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/alert-icon.component.d.ts +3 -0
- package/lib/angular/components/arrow-down-icon.component.d.ts +3 -0
- package/lib/angular/components/arrow-left-icon.component.d.ts +3 -0
- package/lib/angular/components/arrow-right-icon.component.d.ts +3 -0
- package/lib/angular/components/arrow-up-icon.component.d.ts +3 -0
- package/lib/angular/components/atm-icon.component.d.ts +3 -0
- package/lib/angular/components/auto-convert-icon.component.d.ts +3 -0
- package/lib/angular/components/balance-icon.component.d.ts +3 -0
- package/lib/angular/components/bank-icon.component.d.ts +3 -0
- package/lib/angular/components/bank-transfer-icon.component.d.ts +3 -0
- package/lib/angular/components/bar-chart-icon.component.d.ts +3 -0
- package/lib/angular/components/barcode-icon.component.d.ts +3 -0
- package/lib/angular/components/batch-icon.component.d.ts +3 -0
- package/lib/angular/components/beach-icon.component.d.ts +3 -0
- package/lib/angular/components/bills-icon.component.d.ts +3 -0
- package/lib/angular/components/bin-icon.component.d.ts +3 -0
- package/lib/angular/components/book-icon.component.d.ts +3 -0
- package/lib/angular/components/boxes-icon.component.d.ts +3 -0
- package/lib/angular/components/briefcase-icon.component.d.ts +3 -0
- package/lib/angular/components/building-icon.component.d.ts +3 -0
- package/lib/angular/components/bulb-icon.component.d.ts +3 -0
- package/lib/angular/components/calendar-check-icon.component.d.ts +3 -0
- package/lib/angular/components/calendar-icon.component.d.ts +3 -0
- package/lib/angular/components/calendar-success-icon.component.d.ts +3 -0
- package/lib/angular/components/camera-icon.component.d.ts +3 -0
- package/lib/angular/components/car-icon.component.d.ts +3 -0
- package/lib/angular/components/card-detail-icon.component.d.ts +3 -0
- package/lib/angular/components/card-icon.component.d.ts +3 -0
- package/lib/angular/components/card-number-icon.component.d.ts +3 -0
- package/lib/angular/components/card-transferwise-icon.component.d.ts +3 -0
- package/lib/angular/components/card-wise-icon.component.d.ts +3 -0
- package/lib/angular/components/cash-register-icon.component.d.ts +3 -0
- package/lib/angular/components/charity-icon.component.d.ts +3 -0
- package/lib/angular/components/chat-icon.component.d.ts +3 -0
- package/lib/angular/components/check-circle-fill-icon.component.d.ts +3 -0
- package/lib/angular/components/check-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/check-icon.component.d.ts +3 -0
- package/lib/angular/components/chevron-down-icon.component.d.ts +3 -0
- package/lib/angular/components/chevron-left-icon.component.d.ts +3 -0
- package/lib/angular/components/chevron-right-icon.component.d.ts +3 -0
- package/lib/angular/components/chevron-up-icon.component.d.ts +3 -0
- package/lib/angular/components/chip-icon.component.d.ts +3 -0
- package/lib/angular/components/chip-pin-icon.component.d.ts +3 -0
- package/lib/angular/components/clock-fill-icon.component.d.ts +3 -0
- package/lib/angular/components/clock-icon.component.d.ts +3 -0
- package/lib/angular/components/cog-icon.component.d.ts +3 -0
- package/lib/angular/components/collapse-icon.component.d.ts +3 -0
- package/lib/angular/components/comments-icon.component.d.ts +3 -0
- package/lib/angular/components/contactless-icon.component.d.ts +3 -0
- package/lib/angular/components/contract-services-icon.component.d.ts +3 -0
- package/lib/angular/components/convert-icon.component.d.ts +3 -0
- package/lib/angular/components/cost-of-goods-sold-icon.component.d.ts +3 -0
- package/lib/angular/components/cross-circle-fill-icon.component.d.ts +3 -0
- package/lib/angular/components/cross-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/cross-icon.component.d.ts +3 -0
- package/lib/angular/components/cs-icon.component.d.ts +3 -0
- package/lib/angular/components/defrost-icon.component.d.ts +3 -0
- package/lib/angular/components/delivery-icon.component.d.ts +3 -0
- package/lib/angular/components/dial-icon.component.d.ts +3 -0
- package/lib/angular/components/direct-debits-icon.component.d.ts +3 -0
- package/lib/angular/components/do-icon.component.d.ts +3 -0
- package/lib/angular/components/document-icon.component.d.ts +3 -0
- package/lib/angular/components/documents-icon.component.d.ts +3 -0
- package/lib/angular/components/dont-icon.component.d.ts +3 -0
- package/lib/angular/components/download-icon.component.d.ts +3 -0
- package/lib/angular/components/drivers-license-icon.component.d.ts +3 -0
- package/lib/angular/components/e-commerce-icon.component.d.ts +3 -0
- package/lib/angular/components/eating-out-icon.component.d.ts +3 -0
- package/lib/angular/components/edit-icon.component.d.ts +3 -0
- package/lib/angular/components/email-and-mobile-icon.component.d.ts +3 -0
- package/lib/angular/components/email-and-phone-icon.component.d.ts +3 -0
- package/lib/angular/components/email-icon.component.d.ts +3 -0
- package/lib/angular/components/emoji-icon.component.d.ts +3 -0
- package/lib/angular/components/entertainment-icon.component.d.ts +3 -0
- package/lib/angular/components/exchange-rate-icon.component.d.ts +3 -0
- package/lib/angular/components/expand-icon.component.d.ts +3 -0
- package/lib/angular/components/expenses-icon.component.d.ts +3 -0
- package/lib/angular/components/eye-icon.component.d.ts +3 -0
- package/lib/angular/components/eye-shut-icon.component.d.ts +3 -0
- package/lib/angular/components/face-id-icon.component.d.ts +3 -0
- package/lib/angular/components/facebook-icon.component.d.ts +3 -0
- package/lib/angular/components/facebook-square-icon.component.d.ts +3 -0
- package/lib/angular/components/family-icon.component.d.ts +3 -0
- package/lib/angular/components/fast-flag-icon.component.d.ts +3 -0
- package/lib/angular/components/feedback-icon.component.d.ts +3 -0
- package/lib/angular/components/fingerprint-icon.component.d.ts +3 -0
- package/lib/angular/components/fpx-icon.component.d.ts +3 -0
- package/lib/angular/components/freeze-icon.component.d.ts +3 -0
- package/lib/angular/components/general-icon.component.d.ts +3 -0
- package/lib/angular/components/gift-box-icon.component.d.ts +3 -0
- package/lib/angular/components/globe-icon.component.d.ts +3 -0
- package/lib/angular/components/graph-icon.component.d.ts +3 -0
- package/lib/angular/components/groceries-icon.component.d.ts +3 -0
- package/lib/angular/components/handshake-icon.component.d.ts +3 -0
- package/lib/angular/components/happy-emoji-icon.component.d.ts +3 -0
- package/lib/angular/components/headset-icon.component.d.ts +3 -0
- package/lib/angular/components/heart-icon.component.d.ts +3 -0
- package/lib/angular/components/help-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/help-icon.component.d.ts +3 -0
- package/lib/angular/components/holidays-icon.component.d.ts +3 -0
- package/lib/angular/components/home-icon.component.d.ts +3 -0
- package/lib/angular/components/house-icon.component.d.ts +3 -0
- package/lib/angular/components/id-icon.component.d.ts +3 -0
- package/lib/angular/components/ideal-icon.component.d.ts +3 -0
- package/lib/angular/components/image-icon.component.d.ts +3 -0
- package/lib/angular/components/info-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/insert-card-icon.component.d.ts +3 -0
- package/lib/angular/components/insights-icon.component.d.ts +3 -0
- package/lib/angular/components/instagram-icon.component.d.ts +3 -0
- package/lib/angular/components/insurance-icon.component.d.ts +3 -0
- package/lib/angular/components/investments-icon.component.d.ts +3 -0
- package/lib/angular/components/invite-icon.component.d.ts +3 -0
- package/lib/angular/components/keep-icon.component.d.ts +3 -0
- package/lib/angular/components/klarna-icon.component.d.ts +3 -0
- package/lib/angular/components/leaf-icon.component.d.ts +3 -0
- package/lib/angular/components/lightning-bolt-icon.component.d.ts +3 -0
- package/lib/angular/components/lightning-icon.component.d.ts +3 -0
- package/lib/angular/components/limit-icon.component.d.ts +3 -0
- package/lib/angular/components/link-icon.component.d.ts +3 -0
- package/lib/angular/components/linkedin-icon.component.d.ts +3 -0
- package/lib/angular/components/list-icon.component.d.ts +3 -0
- package/lib/angular/components/lock-icon.component.d.ts +3 -0
- package/lib/angular/components/log-in-icon.component.d.ts +3 -0
- package/lib/angular/components/log-out-icon.component.d.ts +3 -0
- package/lib/angular/components/marketing-icon.component.d.ts +3 -0
- package/lib/angular/components/menu-icon.component.d.ts +3 -0
- package/lib/angular/components/messenger-icon.component.d.ts +3 -0
- package/lib/angular/components/minus-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/minus-icon.component.d.ts +3 -0
- package/lib/angular/components/mobile-icon.component.d.ts +3 -0
- package/lib/angular/components/mobile-lock-icon.component.d.ts +3 -0
- package/lib/angular/components/money-icon.component.d.ts +3 -0
- package/lib/angular/components/more-icon.component.d.ts +3 -0
- package/lib/angular/components/multi-currency-icon.component.d.ts +3 -0
- package/lib/angular/components/navigate-away-icon.component.d.ts +3 -0
- package/lib/angular/components/nearby-icon.component.d.ts +3 -0
- package/lib/angular/components/new-icon.component.d.ts +3 -0
- package/lib/angular/components/notification-active-icon.component.d.ts +3 -0
- package/lib/angular/components/notification-icon.component.d.ts +3 -0
- package/lib/angular/components/office-expenses-icon.component.d.ts +3 -0
- package/lib/angular/components/owners-withdrawal-icon.component.d.ts +3 -0
- package/lib/angular/components/padlock-icon.component.d.ts +3 -0
- package/lib/angular/components/padlock-unlocked-icon.component.d.ts +3 -0
- package/lib/angular/components/paperclip-icon.component.d.ts +3 -0
- package/lib/angular/components/passport-icon.component.d.ts +3 -0
- package/lib/angular/components/pay-in-icon.component.d.ts +3 -0
- package/lib/angular/components/paypal-icon.component.d.ts +3 -0
- package/lib/angular/components/pending-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/pending-icon.component.d.ts +3 -0
- package/lib/angular/components/people-icon.component.d.ts +3 -0
- package/lib/angular/components/percentage-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/person-icon.component.d.ts +3 -0
- package/lib/angular/components/personal-care-icon.component.d.ts +3 -0
- package/lib/angular/components/phone-icon.component.d.ts +3 -0
- package/lib/angular/components/picture-icon.component.d.ts +3 -0
- package/lib/angular/components/pie-chart-icon.component.d.ts +3 -0
- package/lib/angular/components/piggy-bank-icon.component.d.ts +3 -0
- package/lib/angular/components/pin-code-icon.component.d.ts +3 -0
- package/lib/angular/components/plus-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/plus-icon.component.d.ts +3 -0
- package/lib/angular/components/profile-icon.component.d.ts +3 -0
- package/lib/angular/components/question-mark-circle-icon.component.d.ts +3 -0
- package/lib/angular/components/question-mark-icon.component.d.ts +3 -0
- package/lib/angular/components/receipt-icon.component.d.ts +3 -0
- package/lib/angular/components/receive-icon.component.d.ts +3 -0
- package/lib/angular/components/recipients-icon.component.d.ts +3 -0
- package/lib/angular/components/refresh-icon.component.d.ts +3 -0
- package/lib/angular/components/reload-icon.component.d.ts +3 -0
- package/lib/angular/components/rent-icon.component.d.ts +3 -0
- package/lib/angular/components/request-receive-icon.component.d.ts +3 -0
- package/lib/angular/components/request-send-icon.component.d.ts +3 -0
- package/lib/angular/components/rewards-icon.component.d.ts +3 -0
- package/lib/angular/components/sad-emoji-icon.component.d.ts +3 -0
- package/lib/angular/components/salary-icon.component.d.ts +3 -0
- package/lib/angular/components/sales-and-royalties-icon.component.d.ts +3 -0
- package/lib/angular/components/savings-icon.component.d.ts +3 -0
- package/lib/angular/components/search-icon.component.d.ts +3 -0
- package/lib/angular/components/send-icon.component.d.ts +3 -0
- package/lib/angular/components/settings-icon.component.d.ts +3 -0
- package/lib/angular/components/share-android-icon.component.d.ts +3 -0
- package/lib/angular/components/share-ios-icon.component.d.ts +3 -0
- package/lib/angular/components/shield-icon.component.d.ts +3 -0
- package/lib/angular/components/shopping-bag-icon.component.d.ts +3 -0
- package/lib/angular/components/slider-icon.component.d.ts +3 -0
- package/lib/angular/components/sofort-icon.component.d.ts +3 -0
- package/lib/angular/components/software-and-hosting-icon.component.d.ts +3 -0
- package/lib/angular/components/software-and-web-hosting-icon.component.d.ts +3 -0
- package/lib/angular/components/speech-bubble-icon.component.d.ts +3 -0
- package/lib/angular/components/speech-bubble-message-icon.component.d.ts +3 -0
- package/lib/angular/components/speech-bubble-pending-icon.component.d.ts +3 -0
- package/lib/angular/components/speech-bubbles-icon.component.d.ts +3 -0
- package/lib/angular/components/star-fill-icon.component.d.ts +3 -0
- package/lib/angular/components/star-icon.component.d.ts +3 -0
- package/lib/angular/components/stationary-icon.component.d.ts +3 -0
- package/lib/angular/components/suitcase-icon.component.d.ts +3 -0
- package/lib/angular/components/switch-icon.component.d.ts +3 -0
- package/lib/angular/components/target-icon.component.d.ts +3 -0
- package/lib/angular/components/tax-icon.component.d.ts +3 -0
- package/lib/angular/components/team-icon.component.d.ts +3 -0
- package/lib/angular/components/theme-icon.component.d.ts +3 -0
- package/lib/angular/components/transfer-icon.component.d.ts +3 -0
- package/lib/angular/components/transport-icon.component.d.ts +3 -0
- package/lib/angular/components/travel-icon.component.d.ts +3 -0
- package/lib/angular/components/trustly-icon.component.d.ts +3 -0
- package/lib/angular/components/twitter-icon.component.d.ts +3 -0
- package/lib/angular/components/two-step-icon.component.d.ts +3 -0
- package/lib/angular/components/unlock-icon.component.d.ts +3 -0
- package/lib/angular/components/upload-icon.component.d.ts +3 -0
- package/lib/angular/components/upward-graph-icon.component.d.ts +3 -0
- package/lib/angular/components/verified-icon.component.d.ts +3 -0
- package/lib/angular/components/warning-icon.component.d.ts +3 -0
- package/lib/angular/components/whatsapp-icon.component.d.ts +3 -0
- package/lib/angular/components/withdrawal-icon.component.d.ts +3 -0
- package/lib/angular/index.js +1 -1
- package/lib/index.es.js +1 -1
- package/lib/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
@@ -9,9 +9,8 @@
|
|
9
9
|
|
10
10
|
Check out the [Live Demo](https://transferwise.github.io/icons/)
|
11
11
|
|
12
|
-
|
13
|
-
|
14
|
-
The icon set has mostly **`outline`** icons but some of them also have **`filled`** variants.
|
12
|
+
Each Icon is designed in two sizes: **`16`** (default) and **`24`** pixels.
|
13
|
+
The icon set are mostly **`outline`** icons but there are also some **`filled`** icons. These are all variations of an **`outline`** icon with `Fill` added as a suffix. Icons with a **`filled`** version have a blue badge in the [Live Demo](https://transferwise.github.io/icons/).
|
15
14
|
|
16
15
|
React and AngularJS icon components generated by script files (see `src/build-scripts` folder).
|
17
16
|
|
@@ -28,12 +27,12 @@ npm install @transferwise/icons
|
|
28
27
|
```
|
29
28
|
## Import and use it with
|
30
29
|
### React
|
31
|
-
[](https://codesandbox.io/s/transferwise-icons-react-
|
30
|
+
[](https://codesandbox.io/s/transferwise-icons-react-e0rt2z)
|
32
31
|
|
33
32
|
```ts
|
34
33
|
import { Bank as BankIcon } from '@transferwise/icons';
|
35
34
|
|
36
|
-
const YourComponent = () => <BankIcon size={24}
|
35
|
+
const YourComponent = () => <BankIcon size={24} data-testid="bank-icon" />;
|
37
36
|
```
|
38
37
|
|
39
38
|
will result in
|
@@ -60,7 +59,7 @@ const AchIcon = icons['Ach'];
|
|
60
59
|
|
61
60
|
Each component has `className` property as well, so you can avoid wrapping your component in extra parent elements.
|
62
61
|
```jsx
|
63
|
-
<BankIcon size={24}
|
62
|
+
<BankIcon size={24} className="bank-profile-icon" />
|
64
63
|
```
|
65
64
|
|
66
65
|
### AngularJS
|
@@ -79,11 +78,11 @@ and in template
|
|
79
78
|
|
80
79
|
<tw-icon name="bank" size="24"></tw-icon>
|
81
80
|
|
82
|
-
<tw-activity-icon size="24"
|
81
|
+
<tw-activity-icon size="24"></tw-activity-icon>
|
83
82
|
|
84
|
-
<tw-balance-icon size="16"
|
83
|
+
<tw-balance-icon size="16"></tw-balance-icon>
|
85
84
|
|
86
|
-
<tw-icon name="balance" size="16"
|
85
|
+
<tw-icon name="balance" size="16"></tw-icon>
|
87
86
|
```
|
88
87
|
|
89
88
|
## Necessary CSS
|
@@ -144,9 +143,8 @@ By default icon will be removed from accessibility tree as [`aria-hidden="true"`
|
|
144
143
|
|
145
144
|
# Contributing
|
146
145
|
|
147
|
-
Add / remove / change icon(s) in the
|
148
|
-
Follow the **naming convention**, use **kebab-case** for naming the icon
|
149
|
-
For naming the SVG files in the folder, follow this pattern: `<<variant>>_<<size>>.svg`, e.g. `fill_16.svg` or `outline_24.svg`.
|
146
|
+
Add / remove / change icon(s) in the [wise-atoms](https://github.com/transferwise/wise-atoms) project and then consume here.
|
147
|
+
Follow the **naming convention**, use **kebab-case** for naming the icon.
|
150
148
|
|
151
149
|
The build process for parsing, optimizing and generating individual icon components out of SVG files is done by script files, that you can find the in the `src/build-scripts` folder.
|
152
150
|
[Rollup.js](https://rollupjs.org/guide/en/) is used for generating the ES and UMD bundles of the library.
|