Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@financial-times/o-icons
Advanced tools
@financial-times/o-icons - npm Package Compare versions
Comparing version 6.0.0-beta.2 to 6.0.0-beta.3
@@ -18,11 +18,18 @@ { | ||
| { | ||
| "title": "Test", | ||
| "name": "test", | ||
| "template": "demos/src/test.mustache", | ||
| "title": "Icons", | ||
| "name": "icons", | ||
| "template": "demos/src/icons.mustache", | ||
| "sass": "demos/src/demo.scss", | ||
| "data": "demos/src/data.json", | ||
| "hidden": true, | ||
| "description": "Test demo to run to test changes made to o-icons" | ||
| "description": "All icons available via o-icons." | ||
| }, | ||
| { | ||
| "title": "Custom Icons", | ||
| "name": "custom-icons", | ||
| "template": "demos/src/custom-icons.mustache", | ||
| "sass": "demos/src/demo.scss", | ||
| "data": "demos/src/data.json", | ||
| "description": "Example customised icons generated using o-icons Sass." | ||
| } | ||
| ] | ||
| } |
@@ -28,6 +28,6 @@ { | ||
| "name": "@financial-times/o-icons", | ||
| "version": "6.0.0-beta.2", | ||
| "version": "6.0.0-beta.3", | ||
| "dependencies": { | ||
| "@financial-times/fticons": "^1.20.0", | ||
| "@financial-times/o-assets": ">= 0.4.1 <4" | ||
| "@financial-times/o-assets": "^3.4.1" | ||
| }, | ||
@@ -34,0 +34,0 @@ "component": "o-icons", |
207
README.md
| # o-icons [](https://circleci.com/gh/Financial-Times/o-icons) [](#licence) | ||
| Helper Sass for the [fticons](http://registry.origami.ft.com/components/fticons) image set. | ||
| [Complete list of available icons](http://registry.origami.ft.com/components/fticons) | ||
| Though you can use these icons at any size, they render best at 40px. | ||
| - [Usage](#usage) | ||
| - [Markup](#markup) | ||
| - [Sass](#sass) | ||
| - [Summary](#summary) | ||
| - [Markup](#markup) | ||
| - [Sass](#sass) | ||
| - [Contributing](#contributing) | ||
@@ -16,51 +13,41 @@ - [Migration guide](#migration-guide) | ||
| ## Usage | ||
| ## Summary | ||
| ### Markup | ||
| There are a few ways to get icons from `fticons`: | ||
| ```html | ||
| <!-- Loads the CSS for o-icons --> | ||
| <link rel="stylesheet" href="//origami-build.ft.com/v2/bundles/css?modules=o-icons@^5.0.0" /> | ||
| 1. Use [o-icons CSS classes](#markup) | ||
| 2. Use [o-icons Sass mixins](#sass) with your own CSS. | ||
| 3. Request the icon directly from the [Image Service](https://www.ft.com/__origami/service/image/v2/docs/url-builder?url=fticon-v1%3Aarrow-down&preview=true) (without using o-icons at all). | ||
| <!-- In your markup, use the helper classes, such as: --> | ||
| <span class="o-icons-icon o-icons-icon--arrow-down"></span> | ||
| ``` | ||
| ### Sass | ||
| ## Markup | ||
| There are a few ways to use o-icons to get fticons: | ||
| To add an icon apply the `o-icons-icon` class to a `span`, along with the modifier class for your specific icon e.g. `o-icons-icon--arrow-down`. See the [registry demos](https://registry.origami.ft.com/components/o-icons) for a full list of icons. | ||
| 1. [Using the CSS helper classes](#using-the-css-helper-classes) | ||
| 2. [Using the Sass mixins with your own CSS](#using-the-sass-mixins-with-your-own-css) | ||
| You can also request the icon directly from the Image Service (without using o-icons at all). See the [fticons](http://registry.origami.ft.com/components/fticons) for how to do this. | ||
| #### Using the CSS helper classes | ||
| ```scss | ||
| // public/bundle.scss | ||
| $o-icons-is-silent: false; | ||
| @import "o-icons/main"; | ||
| ``` | ||
| ```html | ||
| <!-- In your markup, use the helper classes, such as: --> | ||
| <span class="o-icons-icon o-icons-icon--plus"></span> | ||
| <span class="o-icons-icon o-icons-icon--arrow-down"></span> | ||
| <span class="o-icons-icon o-icons-icon--audio"></span> | ||
| <span class="o-icons-icon o-icons-icon--book"></span> | ||
| ``` | ||
| When using CSS classes, it isn't possible to set a colour for the icon or to specify a size for the PNG fallback. The defaults are 'black' for the icon colour and '128px' for the width and height. | ||
| This will include icons with a `128px` width/height by default. Or use the [Sass](#sass) mixins to include icons of a given dimension and colour. | ||
| #### Using the Sass mixins with your own CSS | ||
| ## Sass | ||
| This option has the added flexibility of supporting coloured icons and PNG fallbacks of any size. | ||
| ### Includes icons of different sizes and colors | ||
| Use `oIconsContent` to output the styles for an icon of a given size and colour. | ||
| ```scss | ||
| // public/bundle.scss | ||
| // Use o-colors so you can use colors from the Origami palette. | ||
| @import "o-icons/main"; | ||
| @import "o-colors/main"; // So you can use colors from the Origami palette, the mixin only accepts hex values | ||
| @import "o-colors/main"; | ||
| .icon-plus { | ||
| @include oIconsGetIcon('plus', oColorsGetPaletteColor('cold-1'), 32); | ||
| // Output a 32px, claret coloured plus icon. | ||
| .my-icon-plus { | ||
| @include oIconsContent( | ||
| $icon-name: 'plus', | ||
| $color: oColorsGetPaletteColor('claret'), | ||
| $size: 32 | ||
| ); | ||
| } | ||
@@ -70,119 +57,69 @@ ``` | ||
| ```html | ||
| <span class="icon-plus"></span> | ||
| <span class="my-icon-plus"></span> | ||
| ``` | ||
| The [Responsive Image Service](https://image.webservices.ft.com/) helps serving resolution-independent SVG icons. | ||
| The `oIconsContent` mixins outputs styles used by each icon. This is inefficient if your project outputs multiple icons. In this case we recommend outputting the base styles separately with `oIconsContentBaseStyles`. | ||
| The 'base' of the service url can be set with the `$o-icons-service-base-url` variable. e.g. setting | ||
| ```scss | ||
| // Output a 32px, claret coloured plus icon. | ||
| .my-icon { | ||
| @include oIconsContentBaseStyles(); | ||
| } | ||
| .my-icon--plus { | ||
| @include oIconsContent( | ||
| $icon-name: 'plus', | ||
| $color: oColorsGetPaletteColor('claret'), | ||
| $size: 32, | ||
| $include-base-styles: false // do not duplicate the base styles | ||
| ); | ||
| } | ||
| ``` | ||
| $o-icons-service-base-url: "https://my.image.service/foo"; | ||
| ``` | ||
| will output an image service url in the format `https://my.image.service/foo/v2/images/raw/...`. | ||
| The 'version' of the service url can be set with the `$o-icons-service-version` variable. e.g. setting | ||
| ```html | ||
| <span class="my-icon my-icon--plus"></span> | ||
| ``` | ||
| $o-icons-service-version: "v1"; | ||
| ``` | ||
| will output an image service url in the format `https://my.image.service/foo/v1/images/raw/...`. | ||
| `o-icons` includes a media query to restore either a black or white icon in Microsoft's high-contrast mode. If no icon is acceptable for users of Microsoft's high-contrast mode this may be disabled to reduce bundle size: | ||
| There's also a separate mixin to output just the base styles for an icon: | ||
| ```scss | ||
| .icon { | ||
| @include oIconsBaseStyles; | ||
| .no-high-contrast-window { | ||
| @include oIconsContent( | ||
| $icon-name: 'plus', | ||
| $color: oColorsGetPaletteColor('claret'), | ||
| $high-contrast-fallback: false | ||
| ); | ||
| } | ||
| ``` | ||
| Which outputs: | ||
| ### Using the default CSS helper classes | ||
| To output all icon [helper classes](#markup) include the `oIcons` mixin. | ||
| ```scss | ||
| .icon { | ||
| display: inline-block; | ||
| width: 128px; | ||
| height: 128px; | ||
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| background-position: 50%; | ||
| background-color: transparent; | ||
| vertical-align: middle; | ||
| } | ||
| @import "o-icons/main"; | ||
| @include oIcons(); // include helper classes for all icons | ||
| ``` | ||
| To avoid including all icon [helper classes](#markup), `oIcons` mixin also accepts a list of icons to include: | ||
| ```scss | ||
| @include oIcons($opts: ( | ||
| 'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons | ||
| )); | ||
| ``` | ||
| ## Contributing | ||
| `o-icons` is some Sass mixins and helpers for using the fticons image set. To add a new icon you need to add it to the fticons set. There are instructions in the [fticons README](http://github.com/financial-times/fticon). | ||
| `o-icons` is some Sass mixins and helpers for using the fticons image set. To add a new icon you need to add it to the fticons set. There are instructions in the [fticons README](http://github.com/financial-times/fticon). When the icon is in fticons, run `node ./scripts/build-icon-list.js` to update `o-icons` Sass with the new icon automatically. | ||
| ## Migration guide | ||
| ## Migration | ||
| ### How to upgrade from v4.x.x to v5.x.x? | ||
| State | Major Version | Last Minor Release | Migration guide | | ||
| :---: | :---: | :---: | :---: | ||
| ✨ active | 6 | N/A | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) | | ||
| ⚠ maintained | 5 | 5.9 | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) | | ||
| ╳ deprecated | 4 | 4.5 | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) | | ||
| ╳ deprecated | 3 | 3.3 | - | | ||
| ╳ deprecated | 2 | 2.4 | - | | ||
| ╳ deprecated | 1 | 1.2 | - | | ||
| The jump from 4 to 5 introduces an entirely new set of icons. Using these icons should be a lot easier as they have a uniform amount of white-space around them, so you don't need to individually size icons to work in your application harmoniously. | ||
| That said, because the icons have all changed, you will need to adjust the sizing and alignment of them in your application as things that aligned before may be out of whack now. | ||
| #### Deprecated icons | ||
| The new icon set has deprecated some icons, added some, and renamed some others. For a full list of these icons please see the [fticon README](http://github.com/financial-times/fticon). | ||
| #### Logos and Mastheads | ||
| The logos and masthead that were deprecated in version 4 have now moved completely. Please use the [Logo Images set](http://github.com/financial-times/logo-images) via the image service for these. | ||
| ### How to upgrade from v3.x.x to v4.x.x? | ||
| #### Important changes | ||
| * `o-ft-icons` has been renamed to `o-icons` | ||
| * Icon font has been removed, now it's SVGs all the way. This changes the behaviour for silent mode turned off users which includes Build Service users | ||
| * Some icons have been removed, and as mentioned above, others have been deprecated. The list of deleted icons is: | ||
| - brand-always-learning | ||
| - brand-fast-ft | ||
| - brand-fast | ||
| - brand-myft | ||
| - brand-pearson | ||
| - eye | ||
| - font-size | ||
| - gift | ||
| - section-columnists | ||
| - section-house-and-home | ||
| - section-leader-and-letters | ||
| - section-lex | ||
| - section-markets-data | ||
| - section-money | ||
| - section-uk | ||
| #### Markup changes | ||
| CSS now doesn't add any pseudoclasses, so all the styling is applied directly on the element | ||
| #### CSS Changes | ||
| * Class prefixes need to be renamed from `o-ft-icons` to `o-icons` | ||
| e.g. | ||
| `o-ft-icons-icon` to `o-icons-icon` | ||
| `o-ft-icons-icon--arrow-down` to `o-icons-icon--arrow-down` | ||
| * As it's an SVG instead of a font, size is now set using the CSS properties `width` and `height` | ||
| #### Sass Changes | ||
| * All icon font related mixins have been removed | ||
| * `oFtIconsBaseIconStyles` has been renamed to `oIconsBaseStyles` | ||
| * `oFtIconsGetSvg` has been renamed to `oIconsGetIcon` | ||
| #### Silent mode off Changes | ||
| When using the [Build Service](https://origami-build.ft.com), you're using this module with silent mode turned off. Due to the removal of the icon font, there are a couple things to keep in mind in the new implementation: | ||
| * There is a PNG fallback, and when using the default CSS classes, the size of the image served is _128px_ so it can be resized down, but not up | ||
| * The colour of the icon served is _black_. This cannot be changed. If you need a custom colour (or even a custom size), [option 3](#3-manually-using-the-responsive-image-service) of the suggested ways of using this module is the way to go | ||
| ---- | ||
| ## Contact | ||
@@ -189,0 +126,0 @@ |
Sorry, the diff of this file is not supported yet
Fixed alerts
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.24%
15379
- Number of package files
- increased by25%
10
- Number of low supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Lines of code
- decreased by-20.93%
34
- Number of lines in readme file
- decreased by-32.14%
133