| 1 | # DFDS icons
|
| 2 |
|
| 3 | Unofficial library for DFDS
|
| 4 |
|
| 5 | ## icons from CDN
|
| 6 |
|
| 7 | Version 1 January 2019
|
| 8 |
|
| 9 | ### Quick guide
|
| 10 |
|
| 11 | inlude this in html
|
| 12 |
|
| 13 | ```html
|
| 14 | <script src="https://unpkg.com/@dfds-frontend/icons/dist/core/icons.js"></script>
|
| 15 | ```
|
| 16 |
|
| 17 | use the icons in the html
|
| 18 |
|
| 19 | ```html
|
| 20 | <svg fill="red" width="4rem" height="4rem">
|
| 21 | <use xlink:href="#icon-Burger-Menu"></use>
|
| 22 | </svg>
|
| 23 | ```
|
| 24 |
|
| 25 | ## demo
|
| 26 |
|
| 27 | Mostly 32x32 dimension icons
|
| 28 |
|
| 29 | - https://codepen.io/kunukn/full/32d44d925a777a4e0d03887f57cbb410 core icons
|
| 30 | - https://codepen.io/kunukn/full/ba90afb38f953d31fe3f8918391fa554 freight logistic icons
|
| 31 | - https://codepen.io/kunukn/full/a2256b33d1aeda62ca3cfca37374ae15 flag icons 40x32
|
| 32 | - https://codepen.io/kunukn/full/5c68493ce90b67546e2b95b6b5fd9229 link icons
|
| 33 | - https://codepen.io/kunukn/full/c15f797d9552a4d5b022c5ae4e87ea9a passenger icons
|
| 34 | - https://codepen.io/kunukn/full/041050033f722385fa77af940815377a social media icons
|
| 35 |
|
| 36 | Legacy demo
|
| 37 |
|
| 38 | - https://codepen.io/kunukn/full/3284cab7dec4b27b92d895eb61cbbba6 all main icons
|
| 39 | - https://codepen.io/kunukn/pen/c7080494f3fbd5b1c387353d81bebb36 Html
|
| 40 | - https://codesandbox.io/s/935w7p22xy Html
|
| 41 | - https://codesandbox.io/s/lp8oymr4xq React
|
| 42 |
|
| 43 | ### manual load
|
| 44 |
|
| 45 | To load the icons manully for a specific icon set, like the core set, then apply this css class to the html element. `dfds-core-icons-manual-load`
|
| 46 |
|
| 47 | To load the icons manually for all types of icon set apply this css class to the html element.
|
| 48 | `dfds-icons-manual-load`
|
| 49 |
|
| 50 | ```html
|
| 51 | <html class="dfds-icons-manual-load"></html>
|
| 52 | ```
|
| 53 |
|
| 54 | Then use this method after the `icons.js` has been loaded
|
| 55 |
|
| 56 | ```javascript
|
| 57 | _DFDS_.icons.core();
|
| 58 | ```
|
| 59 |
|
| 60 | You can specify a download path for the SVG file and a callback when SVG has been downloaded.
|
| 61 |
|
| 62 | ```javascript
|
| 63 | _DFDS_.icons.core({
|
| 64 | path: "url-path-to-svg-file",
|
| 65 | callback: function(ajaxResult) {}
|
| 66 | });
|
| 67 | ```
|
| 68 |
|
| 69 | ## icons from npm
|
| 70 |
|
| 71 | - npm install @dfds-frontend/icons
|
| 72 | - the files are in node_modules/@dfds-frontend/icons
|
| 73 |
|
| 74 | inlude this in html
|
| 75 |
|
| 76 | ```html
|
| 77 | <script src="node_modules/@dfds-frontend/icons/dist/core/icons.js"></script>
|
| 78 | ```
|
| 79 |
|
| 80 | or
|
| 81 |
|
| 82 | ```javascript
|
| 83 | import icons from "@dfds-frontend/icons";
|
| 84 | icons();
|
| 85 | ```
|
| 86 |
|
| 87 | ### Available icons
|
| 88 |
|
| 89 | - @dfds-frontend/icons/dist/core/icons.js
|
| 90 | - @dfds-frontend/icons/dist/flags/icons.js
|
| 91 | - @dfds-frontend/icons/dist/passengers/icons.js
|
| 92 | - @dfds-frontend/icons/dist/freight-logistics/icons.js
|
| 93 | - @dfds-frontend/icons/dist/social-media/icons.js
|
| 94 | - @dfds-frontend/icons/dist/links/icons.js
|
| 95 |
|
| 96 | ## more
|
| 97 |
|
| 98 | To see all the available CDN files go to
|
| 99 |
|
| 100 | https://unpkg.com/@dfds-frontend/icons/
|