diff --git a/packages/natds-icons/README.md b/packages/natds-icons/README.md index 1426a014..4bfb29b6 100644 --- a/packages/natds-icons/README.md +++ b/packages/natds-icons/README.md @@ -28,7 +28,7 @@ yarn add @naturacosmeticos/natds-web Then follow the instructions of [natds-web](https://github.com/natura-cosmeticos/natds-js/tree/main/packages/web). -Check out our [documentation for `Icon` in the React Storybook](https://natds-js.netlify.app/releases/v0.17.0/?path=/docs/components-icon--interactive). +Check out our [documentation for `Icon` in the React Storybook](https://storybook-web.natura.com.br). ### For React Native projects @@ -52,7 +52,7 @@ Check out our [documentation for `Icon` in the React Native Storybook for web](h #### CSS + font -You can import fonts and the generated [CSS](https://github.com/natura-cosmeticos/natds-js/blob/master/packages/icons/src/natds-icons.css) and [JSON](https://github.com/natura-cosmeticos/natds-js/blob/master/packages/icons/src/natds-icons.json) files like this: +You can import fonts and the generated [CSS](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.css) and [JSON](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.json) files like this: ```jsx highlight-line="2" import { @@ -66,9 +66,9 @@ import { } from '@naturacosmeticos/natds-icons'; ``` -For use on web environments, you will need to serve the fonts and consume the [CSS](https://github.com/natura-cosmeticos/natds-js/blob/master/packages/icons/src/natds-icons.css) file as you see fit. +For use on web environments, you will need to serve the fonts and consume the [CSS](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.css) file as you see fit. -You can also import the [JSON file](https://github.com/natura-cosmeticos/natds-js/blob/master/packages/icons/src/natds-icons.json) that contains the relationships between the icon names and their `unicode` counterparts (don't rely on the `unicodes`, they are generated automatically) +You can also import the [JSON file](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.json) that contains the relationships between the icon names and their `unicode` counterparts (don't rely on the `unicodes`, they are generated automatically) ```jsx highlight-line="2" import { @@ -77,9 +77,11 @@ import { } from '@naturacosmeticos/natds-icons'; ``` -#### Svg +Working with TypeScript? We also provide [declaration files for CSS](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.css.d.ts) and [JSON](https://github.com/natura-cosmeticos/natds-commons/blob/master/packages/natds-icons/dist/natds-icons.json.d.ts), so you can avoid "Could not find a declaration file for module" error. -You can use the svg icons individually by importing them from the [./dist/svg](./dist/svg) folder; +#### SVG + +You can use the SVG icons individually by importing them from the [./dist/svg](./dist/svg) folder; #### CDN @@ -95,18 +97,18 @@ https://unpkg.com/@naturacosmeticos/natds-icons@0.22.0/dist/natds-icons.json https://unpkg.com/@naturacosmeticos/natds-icons@0.22.0/dist/svg/filled-action-add.svg ``` +You can replace `0.22.0` by the better version for your project. Always prefer the latest stable version. + ### iOS -A [natds-icons.swift](./dist/natds-icons.swift) file is generated to be used in ios projects. -Visit [natds-ios](https://github.com/natura-cosmeticos/natds-ios) for more information. +A [natds-icons.swift](./dist/natds-icons.swift) file is generated to be used in iOS projects. +You can [visit `natds-ios` project](https://github.com/natura-cosmeticos/natds-ios) for more info. ## Where to find icon names You can search for the icons you need in our [Design System Storybook](https://storybook-web.natura.com.br). -Note that the availability of the icons may vary depending on the version you use. - -So always try to use the latest version of `natds-icons` +Note that the availability of the icons may vary depending on the version you use, so always try to use the latest version of `natds-icons`. ## How to contribute