@solar-icons/js 2.0.0-beta.1 → 2.0.0-beta.2
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 +49 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @solar-icons/js
|
|
2
|
+
|
|
3
|
+
Vanilla JavaScript DOM injection library for Solar Icons. This package provides 7,476 SVG icons across 6 styles (Bold, Broken, Linear, Outline, Bold Duotone, Line Duotone), optimized for environments without a virtual DOM.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **7,476 SVGs:** 1,246 unique icons in 6 styles. Designed by 480 Design.
|
|
8
|
+
- **Tree-shakeable:** Import only the icons you use.
|
|
9
|
+
- **Vanilla DOM injection:** Injects SVG markup into elements based on their `data-solar` attributes.
|
|
10
|
+
- **Global configuration:** Override size, color, and stroke width globally via CSS variables (`--solar-color`, `--solar-size`).
|
|
11
|
+
- **Duotone support:** Secondary color controls for `bold-duotone` and `line-duotone` styles.
|
|
12
|
+
- **Zero dependencies:** String-based rendering.
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
npm install @solar-icons/js
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
First, define placeholders in your HTML. The default attribute is `data-solar`.
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<i data-solar="home-linear"></i> <i data-solar="login-bold"></i>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Then, import the specific icons you need and initialize the library. The `createIcons` function will parse the `data-solar` attributes, convert them to pascal case, and match them against the provided icons object.
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import { createIcons } from '@solar-icons/js'
|
|
32
|
+
import { HomeLinearIcon } from '@solar-icons/js/linear/home'
|
|
33
|
+
import { LoginBoldIcon } from '@solar-icons/js/bold/login'
|
|
34
|
+
|
|
35
|
+
createIcons({
|
|
36
|
+
icons: {
|
|
37
|
+
HomeLinearIcon,
|
|
38
|
+
LoginBoldIcon,
|
|
39
|
+
},
|
|
40
|
+
})
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Documentation
|
|
44
|
+
|
|
45
|
+
For installation guides, API reference, and a searchable icon catalog, visit the [JS Documentation](https://solar-icons.vercel.app/docs/v2/packages/js).
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
MIT License. Icons by 480 Design (CC BY 4.0).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@solar-icons/js",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"tsdown": "^0.22.4",
|
|
82
82
|
"typescript": "^6.0.3",
|
|
83
83
|
"vitest": "^4.1.10",
|
|
84
|
-
"@solar-icons/core": "2.0.0-beta.
|
|
84
|
+
"@solar-icons/core": "2.0.0-beta.1"
|
|
85
85
|
},
|
|
86
86
|
"engines": {
|
|
87
87
|
"node": ">=16"
|