@cypress-design/react-icon 0.18.2 → 0.20.0

package/.gitignore

@@ -1 +1 @@
-TreeShakableIcons.ts
+_TreeShakableIcons.ts

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+$ yarn build:codegen && yarn build:module && yarn build:types
+$ node ./generate-icons.js
+$ rollup -c ./rollup.config.mjs
+
+./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
+(!) Mixing named and default exports
+https://rollupjs.org/configuration-options/#output-exports
+The following entry modules are using named and default exports together:
+index.ts
+
+Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
+created ./dist/index.umd.js, ./dist/index.es.mjs in 13.9s
+$ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @cypress-design/react-icon
 
+## 0.20.0
+
+### Minor Changes
+
+- [#196](https://github.com/cypress-io/cypress-design/pull/196) [`fc6d9e4`](https://github.com/cypress-io/cypress-design/commit/fc6d9e4fedcc01fa8e01b868b0fa66d8895c37d0) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: avoid constants relative imports
+
+## 0.19.0
+
+### Minor Changes
+
+- [#167](https://github.com/cypress-io/cypress-design/pull/167) [`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251) Thanks [@elevatebart](https://github.com/elevatebart)! - add icons shape pieces of heaven (sun & moon)
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/icon-registry@0.21.0
+
 ## 0.18.2
 
 ### Patch Changes

package/IconReact.cy.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Icon, { IconObjectBookCode } from './index'
-import { mount } from 'cypress/react'
+import { mount } from 'cypress/react18'
 
 describe('Icon', () => {
   it('renders correctly', () => {

package/ReadMe.md

@@ -1,17 +1,29 @@
 # Icon
 
+## Install
+
+```bash
+npm install @cypress-design/react-icon
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/react-icon
+```
+
 ## Usage
 
 The simple way using the Icon component
 
-```tsx
-import { Icon } from '@cypress-design/react-icon'
+```tsx live
+import Icon from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (
-    <button>
+    <button className="flex items-center gap-[8px] p-[8px] border-1 border-red-500">
       <Icon
-        name="book"
+        name="object-book"
         size="16"
         strokeColor="blue-600"
         fillColor="red-200"
@@ -23,16 +35,16 @@ export const MyButtonWithIcon = () => {
 }
 ```
 
-The tree-shakable way (more optimized)
+We can also import each icon components separately. When we use named imports, the results becomes tree-shakable (more optimized).
+This means that the final bundle will not contain any of the unused icons code.
+Only imported icons will end up in your app or website js.
 
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
+```tsx live
+import { IconObjectBook } from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (
-    <button>
-      <IconBook size="16" strokeColor="indigo-600" fillColor="red-200" />
-    </button>
+    <IconObjectBook size="16" strokeColor="indigo-600" fillColor="red-200" />
   )
 }
 ```
@@ -41,13 +53,13 @@ Should you need to change the color of the icon on `hover` or `focus` prefix the
 
 Here, the `strokeColor` will change on hover from indigo to jade
 
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
+```tsx live
+import { IconObjectBook } from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (
     <button>
-      <IconBook
+      <IconObjectBook
         size="16"
         strokeColor="indigo-600"
         hoverStrokeColor="jade-600"
@@ -62,14 +74,14 @@ This prop will change all the pseudo prefixes to be group focused instead of tri
 
 To achieve the same goal, in WindiCSS, we would use `group-hover:` instead of `hover:`.
 
-```tsx
-import { IconBook } from '@cypress-design/react-icon'
+```tsx live
+import { IconObjectBook } from '@cypress-design/react-icon'
 
 export const MyButtonWithIcon = () => {
   return (
-    <button className="group hover:text-jade-800">
-      <IconBook
-        size="16"
+    <button className="flex items-center gap-[8px] group hover:text-jade-800">
+      <IconObjectBook
+        size="48"
         strokeColor="indigo-600"
         hoverStrokeColor="jade-600"
         interactiveColorsOnGroup
@@ -79,15 +91,3 @@ export const MyButtonWithIcon = () => {
   )
 }
 ```
-
-## install
-
-```bash
-npm install @cypress-design/react-icon
-```
-
-or with yarn
-
-```bash
-yarn add @cypress-design/react-icon
-```