@dile/iconlib 0.0.4 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,43 @@
|
|
|
1
|
-
# Icon
|
|
1
|
+
# Icon libraries as Web Components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
@dile/iconlib provides Web Components wrappers for popular icon libraries like [Lucide Icons](https://lucide.dev) or [FontAwesome](https://fontawesome.com/).
|
|
4
4
|
|
|
5
|
-
This package allows you to use the icons as **standard JavaScript Web Components**, without depending on any framework.
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
This package allows you to use icons as standard HTML elements without framework dependencies or build tools.
|
|
7
|
+
|
|
8
|
+
Full documentation available at [Dile components icons](https://dile-components.com/icons/).
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- Framework-agnostic: Works in any JavaScript environment.
|
|
13
|
+
- Tree-shakable: Import only needed icons to minimize bundle size.
|
|
14
|
+
- Customizable: Control size, color, and other styles via CSS custom properties.
|
|
15
|
+
- Shadow DOM support: Encapsulated styles prevent conflicts.
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
Import and use icons directly in HTML or templates.
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<script type="module" src="https://unpkg.com/@dile/iconlib/lucide-icons/bird.js"></script>
|
|
23
|
+
|
|
24
|
+
<dile-lucide-icon-bird></dile-lucide-icon-bird>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Configure styles with CSS custom properties like `--dile-icon-size` and `--dile-icon-color`.
|
|
28
|
+
|
|
29
|
+
You can also use the icon libraries together with other frontend tools like Vite, importing the components with the package name:
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import '@dile/iconlib/lucide-icons/bird.js';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Customization
|
|
36
|
+
|
|
37
|
+
Icons support attributes:
|
|
38
|
+
|
|
39
|
+
- `rounded`: adds a rounded background area around the SVG, turning the icon into a button-like appearance.
|
|
40
|
+
|
|
41
|
+
## Demo
|
|
42
|
+
|
|
43
|
+
Live examples and API details on the [documentation page](https://dile-components.com/icons/).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/iconlib",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Icon Component Library based on popular libraries",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"UI",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"publishConfig": {
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "a64dad6afe49ba01d4a1e1076379bf7e2bf5eeaa"
|
|
29
29
|
}
|