Enchanted Icons is a collection of web component icons that are used in HCL Software products.
npm install @hcl-software/enchanted-icons-web-componentEnchanted 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 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
``sh`
npm install @hcl-software/enchanted-icons-web-component$3
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`
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
`
Styling (Size and Color)
You can style the icons by setting the size and color properties on the element.
As HTML attributes:
`html
`
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;
}