fixed readme not showing in npmjs (#45)

* fixed readme not showing in npmjs

* fixed svg

* updated generated files

Author: felix-hcl

CHANGELOG.md

@@ -10,6 +10,12 @@
 
 #### Breaking changes
 
+## 1.7.1
+
+### Fixed
+- Fixed the README.md files so they render properly on npmjs.com.
+- Fixed items--search--initial SVG
+
 ## 1.7.0
 
 ### Added

README.md

@@ -21,134 +21,8 @@ This repository contains the following packages:
 | **`@hcl-software/enchanted-icons`** | React (Material-UI) components. |
 | **`@hcl-software/enchanted-icons-web-component`** | Standard Web Components. |
 
-## Installation
-
-### React
-
-```sh
-npm install @hcl-software/enchanted-icons
-```
-### Web Components
-```sh
-npm install @hcl-software/enchanted-icons-web-component
-```
-
-## Usage
-
-In most cases, the Enchanted Components use the correct icons to adhere to the Enchanted design language; however, there may be valid reasons to use
-icons directly from this library. **Always consult with your UX contact when using icons directly from this library.**
-
-### Usage (React)
-The React icons are Material-UI `<SvgIcon>` components and support all of its props.
-
-#### Icon size
-```jsx
-import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
-...
-<CheckmarkIcon fontSize="small" />
-```
-or
-```jsx
-import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
-...
-<CheckmarkIcon fontSize="16px" />
-```
-
-#### Icon color
-```jsx
-import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
-...
-<CheckmarkIcon color="success" />
-```
-Note: It is strongly recommended to use the thematic names of colors of the Enchanted theme, rather than explicit rgba values. For example, `"success"` or `"action"`.  This ensures consistency of colors across the UI and over time.  
-
-#### Icon button
-A common pattern is to use an icon in conjunction with an Enchanted `<IconButton>`
-```jsx
-import IconButton from '@hcl-software/enchanted-react-components/dist/IconButton';
-import RocketIcon from '@hcl-software/enchanted-icons/dist/carbon/es/rocket';
-...
-<IconButton size="small" aria-label="launch"><RocketIcon /></IconButton>
-```
-Note: In this case the size of the icon is determined by the `size` prop of the `<IconButton>`. The icon color is controlled by the different button states (active, disabled, etc) and should not be overriden.
-
-### Advanced
-Icons from this library can take any props supported by MUI's `<SvgIcon>` component. See https://v5.mui.com/material-ui/api/svg-icon/  
-**Always consult with your UX contact before applying any advanced styling.**
-
-### Usage (Web Components)
-Web Components can be used in any web framework or plain HTML.
-
-**1. Import the icon definition**
-You must first import the icon's JavaScript file to define the custom element. This is typically done once in your application's main entry point.
-```javascript
-import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/rocket';
-import '@hcl-software/enchanted-icons-web-component/dist/apps/es/app-switcher';
-```
-
-**2. Use the HTML tag**
-Once defined, you can use the icon's custom HTML tag. The tag name is `icon-` followed by the icon's name (e.g., `icon-rocket`, `icon-app-switcher`).
-```html
-<icon-rocket></icon-rocket>
-```
-
-Icons with double dash in their name like `chevron--up` will use single dash in their component name.
-```javascript
-import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--up';
-
-// Usage
-<icon-chevron-up></icon-chevron-up>
-```
-
-**Styling (Size and Color)**
-You can style the icons by setting the `size` and `color` properties on the element.
-
-**As HTML attributes:**
-```html
-<icon-rocket size="32"></icon-rocket>
-
-<icon-app-switcher color="blue"></icon-app-switcher>
-```
-
-**As JavaScript properties:**
-```javascript
-const myIcon = document.querySelector('icon-rocket');
-myIcon.size = 24;
-myIcon.color = 'var(--my-theme-color)';
-```
-
-**With CSS Custom Properties (Advanced):**
-The icons are styled internally with CSS Custom Properties. You can override these variables globally to set a theme for all icons.
-```css
-/* Set a default theme size and color for all icons on the page */
-body {
-  --icon-theme-size: 24px;
-  --icon-theme-color: #3d3d3d;
-}
-```
 
 ## Development
-This is a monorepo. To install dependencies for development, run `npm install` from within each package's directory (e.g., `packages/react`, `packages/web-component`, `packages/icons-builder`).
-
-Other development commands (like those listed in the tables below) must also be run from within their respective package directories.
-
-### Common Scripts
-These scripts are available in both the React (@hcl-software/enchanted-icons) and Web Component (@hcl-software/enchanted-icons-web-component) packages.
-
-| task | command | description |
-|--|--|--|
-| **Build** | `npm run build` | Compiles the package source code into a `dist` folder. |
-| **Lints** | `npm run lint` | Runs the linter to check for code style issues. |
-| **Lint (Fix)** | `npm run lint-fix` | Runs the linter and automatically fixes resolvable issues. |
-
-This script is available in the internal `packages/icons-builder` package.
-
-| task | command | description |
-|--|--|--|
-| **Generate** | `npm run generate` | Generates all React and Web Component icons from source SVG files. |
-
-## Lerna Commands
-
 This repository uses [Lerna](https://lerna.js.org/) for managing multiple packages. The most common commands are also wrapped in the root npm scripts:
 
 | Command | Description |

packages/icons-builder/svg/items--search--initial/items--search--initial.svg

@@ -0,0 +1,55 @@
+# HCL Software Enchanted Icons package
+
+Enchanted Icons is a collection of icons that are used in HCL Software products. This package exposes own creations as well as external icons from the [Carbon React Icons Package](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) and exposes those as ready to use Material-UI components.
+
+(C) 2024 HCL America Inc. Apache-2.0 license [https://www.apache.org/licenses/LICENSE-2.0](https://www.apache.org/licenses/LICENSE-2.0)
+
+
+[![npm](https://nodei.co/npm/@hcl-software/enchanted-icons.png)](https://www.npmjs.com/package/@hcl-software/enchanted-icons)
+
+## ⬇️ Installation
+
+```sh
+npm install @hcl-software/enchanted-icons
+```
+## Usage
+
+In most cases, the Enchanted Components use the correct icons to adhere to the Enchanted design language; however, there may be valid reasons to use
+icons directly from this library. **Always consult with your UX contact when using icons directly from this library.**
+
+### Examples
+
+#### Icon size
+```jsx
+import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
+...
+<CheckmarkIcon fontSize="small" />
+```
+or
+```jsx
+import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
+...
+<CheckmarkIcon fontSize="16px" />
+```
+
+#### Icon color
+```jsx
+import CheckmarkIcon from '@hcl-software/enchanted-icons/dist/carbon/es/checkmark';
+...
+<CheckmarkIcon color="success" />
+```
+Note: It is strongly recommended to use the thematic names of colors of the Enchanted theme, rather than explicit rgba values. For example, `"success"` or `"action"`.  This ensures consistency of colors across the UI and over time.  
+
+#### Icon button
+A common pattern is to use an icon in conjunction with an Enchanted `<IconButton>`
+```jsx
+import IconButton from '@hcl-software/enchanted-react-components/dist/IconButton';
+import RocketIcon from '@hcl-software/enchanted-icons/dist/carbon/es/rocket';
+...
+<IconButton size="small" aria-label="launch"><RocketIcon /></IconButton>
+```
+Note: In this case the size of the icon is determined by the `size` prop of the `<IconButton>`. The icon color is controlled by the different button states (active, disabled, etc) and should not be overriden.
+
+### Advanced
+Icons from this library can take any props supported by MUI's `<SvgIcon>` component. See https://v5.mui.com/material-ui/api/svg-icon/  
+**Always consult with your UX contact before applying any advanced styling.**

packages/react/README.md

@@ -28,6 +28,9 @@ const content: IIconContent[] = [
     elem: 'path',
     attrs: {
       d: 'M110 20C110 21.104 109.104 22 108 22C106.9 22 106 21.104 106 20C106 18.896 106.9 18 108 18C109.104 18 110 18.896 110 20ZM116 10C114.9 10 114 10.896 114 12C114 13.104 114.9 14 116 14C117.104 14 118 13.104 118 12C118 10.896 117.104 10 116 10ZM100 26C98.9 26 98 26.896 98 28C98 29.104 98.9 30 100 30C101.104 30 102 29.104 102 28C102 26.896 101.104 26 100 26ZM28 98C26.9 98 26 98.896 26 100C26 101.104 26.9 102 28 102C29.104 102 30 101.104 30 100C30 98.896 29.104 98 28 98ZM20 106C18.9 106 18 106.896 18 108C18 109.104 18.9 110 20 110C21.104 110 22 109.104 22 108C22 106.896 21.104 106 20 106ZM12 114C10.9 114 10 114.896 10 116C10 117.104 10.9 118 12 118C13.104 118 14 117.104 14 116C14 114.896 13.104 114 12 114ZM117.02 114.98L94.3 92.264C101.496 84.564 105.44 74.584 105.44 64C105.44 41.152 86.852 22.56 64 22.56C41.152 22.56 22.56 41.152 22.56 64C22.56 86.852 41.148 105.44 64 105.44C74.584 105.44 84.568 101.496 92.264 94.3L114.98 117.02L117.02 114.98ZM102.56 64C102.56 74.296 98.548 83.976 91.264 91.26C83.98 98.544 74.296 102.56 64 102.56C42.74 102.56 25.44 85.264 25.44 64C25.44 42.736 42.74 25.44 64 25.44C85.26 25.44 102.56 42.74 102.56 64ZM53.44 84V76C53.44 75.204 52.796 74.56 52 74.56H44C43.204 74.56 42.56 75.204 42.56 76V84C42.56 84.796 43.204 85.44 44 85.44H52C52.796 85.44 53.44 84.796 53.44 84ZM45.44 77.44H50.56V82.556H45.44V77.44ZM69.44 68V60C69.44 59.204 68.796 58.56 68 58.56H60C59.204 58.56 58.56 59.204 58.56 60V68C58.56 68.796 59.204 69.44 60 69.44H68C68.796 69.44 69.44 68.796 69.44 68ZM61.44 61.44H66.56V66.56H61.44V61.44V61.44ZM85.44 52V44C85.44 43.204 84.796 42.56 84 42.56H76C75.204 42.56 74.56 43.204 74.56 44V52C74.56 52.796 75.204 53.44 76 53.44H84C84.796 53.44 85.44 52.796 85.44 52ZM77.44 45.44H82.556V50.56H77.44V45.44Z',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd',
     },
   },
 ];

packages/react/src/apps/es/items--search--initial/index.tsx

@@ -0,0 +1,64 @@
+# HCL Software Enchanted Icons package for Web Components
+
+Enchanted Icons is a collection of icons that are used in HCL Software products. This package exposes own creations as well as external icons from the [Carbon React Icons Package](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) and exposes those as ready to use web components.
+
+(C) 2024 HCL America Inc. Apache-2.0 license [https://www.apache.org/licenses/LICENSE-2.0](https://www.apache.org/licenses/LICENSE-2.0)
+
+
+[![npm](https://nodei.co/npm/@hcl-software/enchanted-icons.png)](https://www.npmjs.com/package/@hcl-software/enchanted-icons)
+
+## ⬇️ Installation
+
+```sh
+npm install @hcl-software/enchanted-icons-web-component
+```
+### Usage
+Web Components can be used in any web framework or plain HTML.
+
+**1. Import the icon definition**
+You must first import the icon's JavaScript file to define the custom element. This is typically done once in your application's main entry point.
+```javascript
+import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/rocket';
+import '@hcl-software/enchanted-icons-web-component/dist/apps/es/app-switcher';
+```
+
+**2. Use the HTML tag**
+Once defined, you can use the icon's custom HTML tag. The tag name is `icon-` followed by the icon's name (e.g., `icon-rocket`, `icon-app-switcher`).
+```html
+<icon-rocket></icon-rocket>
+```
+
+Icons with double dash in their name like `chevron--up` will use single dash in their component name.
+```javascript
+import '@hcl-software/enchanted-icons-web-component/dist/carbon/es/chevron--up';
+
+// Usage
+<icon-chevron-up></icon-chevron-up>
+```
+
+**Styling (Size and Color)**
+You can style the icons by setting the `size` and `color` properties on the element.
+
+**As HTML attributes:**
+```html
+<icon-rocket size="32"></icon-rocket>
+
+<icon-app-switcher color="blue"></icon-app-switcher>
+```
+
+**As JavaScript properties:**
+```javascript
+const myIcon = document.querySelector('icon-rocket');
+myIcon.size = 24;
+myIcon.color = 'var(--my-theme-color)';
+```
+
+**With CSS Custom Properties (Advanced):**
+The icons are styled internally with CSS Custom Properties. You can override these variables globally to set a theme for all icons.
+```css
+/* Set a default theme size and color for all icons on the page */
+body {
+  --icon-theme-size: 24px;
+  --icon-theme-color: #3d3d3d;
+}
+```

packages/web-component/README.md

@@ -29,7 +29,10 @@ const content: IIconContent[] = [
   {
     elem: 'path',
     attrs: {
-      d: 'M110 20C110 21.104 109.104 22 108 22C106.9 22 106 21.104 106 20C106 18.896 106.9 18 108 18C109.104 18 110 18.896 110 20ZM116 10C114.9 10 114 10.896 114 12C114 13.104 114.9 14 116 14C117.104 14 118 13.104 118 12C118 10.896 117.104 10 116 10ZM100 26C98.9 26 98 26.896 98 28C98 29.104 98.9 30 100 30C101.104 30 102 29.104 102 28C102 26.896 101.104 26 100 26ZM28 98C26.9 98 26 98.896 26 100C26 101.104 26.9 102 28 102C29.104 102 30 101.104 30 100C30 98.896 29.104 98 28 98ZM20 106C18.9 106 18 106.896 18 108C18 109.104 18.9 110 20 110C21.104 110 22 109.104 22 108C22 106.896 21.104 106 20 106ZM12 114C10.9 114 10 114.896 10 116C10 117.104 10.9 118 12 118C13.104 118 14 117.104 14 116C14 114.896 13.104 114 12 114ZM117.02 114.98L94.3 92.264C101.496 84.564 105.44 74.584 105.44 64C105.44 41.152 86.852 22.56 64 22.56C41.152 22.56 22.56 41.152 22.56 64C22.56 86.852 41.148 105.44 64 105.44C74.584 105.44 84.568 101.496 92.264 94.3L114.98 117.02L117.02 114.98ZM102.56 64C102.56 74.296 98.548 83.976 91.264 91.26C83.98 98.544 74.296 102.56 64 102.56C42.74 102.56 25.44 85.264 25.44 64C25.44 42.736 42.74 25.44 64 25.44C85.26 25.44 102.56 42.74 102.56 64ZM53.44 84V76C53.44 75.204 52.796 74.56 52 74.56H44C43.204 74.56 42.56 75.204 42.56 76V84C42.56 84.796 43.204 85.44 44 85.44H52C52.796 85.44 53.44 84.796 53.44 84ZM45.44 77.44H50.56V82.556H45.44V77.44ZM69.44 68V60C69.44 59.204 68.796 58.56 68 58.56H60C59.204 58.56 58.56 59.204 58.56 60V68C58.56 68.796 59.204 69.44 60 69.44H68C68.796 69.44 69.44 68.796 69.44 68ZM61.44 61.44H66.56V66.56H61.44V61.44V61.44ZM85.44 52V44C85.44 43.204 84.796 42.56 84 42.56H76C75.204 42.56 74.56 43.204 74.56 44V52C74.56 52.796 75.204 53.44 76 53.44H84C84.796 53.44 85.44 52.796 85.44 52ZM77.44 45.44H82.556V50.56H77.44V45.44Z'
+      d: 'M110 20C110 21.104 109.104 22 108 22C106.9 22 106 21.104 106 20C106 18.896 106.9 18 108 18C109.104 18 110 18.896 110 20ZM116 10C114.9 10 114 10.896 114 12C114 13.104 114.9 14 116 14C117.104 14 118 13.104 118 12C118 10.896 117.104 10 116 10ZM100 26C98.9 26 98 26.896 98 28C98 29.104 98.9 30 100 30C101.104 30 102 29.104 102 28C102 26.896 101.104 26 100 26ZM28 98C26.9 98 26 98.896 26 100C26 101.104 26.9 102 28 102C29.104 102 30 101.104 30 100C30 98.896 29.104 98 28 98ZM20 106C18.9 106 18 106.896 18 108C18 109.104 18.9 110 20 110C21.104 110 22 109.104 22 108C22 106.896 21.104 106 20 106ZM12 114C10.9 114 10 114.896 10 116C10 117.104 10.9 118 12 118C13.104 118 14 117.104 14 116C14 114.896 13.104 114 12 114ZM117.02 114.98L94.3 92.264C101.496 84.564 105.44 74.584 105.44 64C105.44 41.152 86.852 22.56 64 22.56C41.152 22.56 22.56 41.152 22.56 64C22.56 86.852 41.148 105.44 64 105.44C74.584 105.44 84.568 101.496 92.264 94.3L114.98 117.02L117.02 114.98ZM102.56 64C102.56 74.296 98.548 83.976 91.264 91.26C83.98 98.544 74.296 102.56 64 102.56C42.74 102.56 25.44 85.264 25.44 64C25.44 42.736 42.74 25.44 64 25.44C85.26 25.44 102.56 42.74 102.56 64ZM53.44 84V76C53.44 75.204 52.796 74.56 52 74.56H44C43.204 74.56 42.56 75.204 42.56 76V84C42.56 84.796 43.204 85.44 44 85.44H52C52.796 85.44 53.44 84.796 53.44 84ZM45.44 77.44H50.56V82.556H45.44V77.44ZM69.44 68V60C69.44 59.204 68.796 58.56 68 58.56H60C59.204 58.56 58.56 59.204 58.56 60V68C58.56 68.796 59.204 69.44 60 69.44H68C68.796 69.44 69.44 68.796 69.44 68ZM61.44 61.44H66.56V66.56H61.44V61.44V61.44ZM85.44 52V44C85.44 43.204 84.796 42.56 84 42.56H76C75.204 42.56 74.56 43.204 74.56 44V52C74.56 52.796 75.204 53.44 76 53.44H84C84.796 53.44 85.44 52.796 85.44 52ZM77.44 45.44H82.556V50.56H77.44V45.44Z',
+      fill: 'currentColor',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd'
     }
   }
 ];