forked from lauralucca/natds-commons
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #135 from natura-cosmeticos/DSY-1519-1
[DSY-1519] docs: fix css/json links, add d.ts info
- Loading branch information
Showing
1 changed file
with
13 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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/[email protected]/dist/natds-icons.json | |
| https://unpkg.com/@naturacosmeticos/[email protected]/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 | ||
|
|
||
|
|
||