@als-computing/icons 0.1.19 → 0.1.21
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 +141 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,149 @@
|
|
|
1
1
|
# Figma Icons Source
|
|
2
|
+
## ALS Icons Library
|
|
2
3
|
|
|
3
|
-
This
|
|
4
|
+
This package provides a set of optimized SVG icons exported from Figma, designed for easy use in web projects. All icons are processed to use `fill="currentColor"` for flexible theming.
|
|
4
5
|
|
|
5
|
-
## Usage
|
|
6
6
|
|
|
7
|
+
# ALS Icons Library
|
|
8
|
+
|
|
9
|
+
**ALS Icons Library** is a collection of high-quality, production-ready SVG icons exported from Figma and optimized for modern web development. Each icon is processed to use `fill="currentColor"`, making them easy to style and integrate into any design system or application.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- 100% SVG, no dependencies
|
|
16
|
+
- Consistent, pixel-perfect icons
|
|
17
|
+
- Optimized with SVGO for minimal file size
|
|
18
|
+
- All icons use `fill="currentColor"` for easy theming
|
|
19
|
+
- Ready for use in React, Vue, Angular, plain HTML, and more
|
|
20
|
+
- Includes both ESM and CommonJS exports
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
Install the package via npm:
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
npm install @als-computing/icons
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Or with yarn:
|
|
33
|
+
|
|
34
|
+
```sh
|
|
7
35
|
SVG files are automatically pushed to the `assets/` folder by the Figma plugin.
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
|
|
42
|
+
### 1. Importing an Icon in JavaScript/TypeScript
|
|
43
|
+
|
|
44
|
+
#### ESM (ES Modules)
|
|
45
|
+
```js
|
|
46
|
+
import IconName from '@als-computing/icons/dist/IconName.js';
|
|
47
|
+
|
|
48
|
+
// Example: Render in React
|
|
49
|
+
function App() {
|
|
50
|
+
return (
|
|
51
|
+
<span style={{ color: 'red' }}>
|
|
52
|
+
<span dangerouslySetInnerHTML={{ __html: IconName }} />
|
|
53
|
+
</span>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
#### CommonJS
|
|
59
|
+
```js
|
|
60
|
+
const IconName = require('@als-computing/icons/dist/IconName.js');
|
|
61
|
+
// Use IconName as SVG markup
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### 2. Using Icons Directly in HTML
|
|
65
|
+
|
|
66
|
+
Copy the SVG markup from the icon file and paste it into your HTML:
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<span style="color: blue">
|
|
70
|
+
<!-- Paste SVG markup here -->
|
|
71
|
+
</span>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
## Theming & Customization
|
|
78
|
+
|
|
79
|
+
All icons are exported with `fill="currentColor"` on the root `<svg>` element. This means the icon will automatically inherit the text color of its parent element. You can easily change the icon color using CSS or utility frameworks like Tailwind CSS.
|
|
80
|
+
|
|
81
|
+
### Using CSS
|
|
82
|
+
|
|
83
|
+
```css
|
|
84
|
+
.icon-red {
|
|
85
|
+
color: red;
|
|
86
|
+
}
|
|
87
|
+
.icon-primary {
|
|
88
|
+
color: #1976d2;
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<span class="icon-red">
|
|
94
|
+
<!-- SVG icon here will be red -->
|
|
95
|
+
</span>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
You can also set the color inline:
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<span style="color: green">
|
|
102
|
+
<!-- SVG icon here will be green -->
|
|
103
|
+
</span>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Using Tailwind CSS
|
|
107
|
+
|
|
108
|
+
You can use Tailwind's text color utilities to style your icons instantly:
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
<span class="text-blue-500">
|
|
112
|
+
<!-- SVG icon here will be blue -->
|
|
113
|
+
</span>
|
|
114
|
+
|
|
115
|
+
<span class="text-gray-700 dark:text-gray-200">
|
|
116
|
+
<!-- SVG icon here will be gray in light mode, light gray in dark mode -->
|
|
117
|
+
</span>
|
|
118
|
+
|
|
119
|
+
<span class="text-xl">
|
|
120
|
+
<!-- SVG icon here will be extra large -->
|
|
121
|
+
</span>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
You can also combine Tailwind classes for size and color:
|
|
125
|
+
|
|
126
|
+
```html
|
|
127
|
+
<span class="text-red-600 text-2xl">
|
|
128
|
+
<!-- SVG icon here will be red and 2xl size -->
|
|
129
|
+
</span>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
## How It Works
|
|
135
|
+
|
|
136
|
+
- All SVGs are optimized and cleaned using SVGO.
|
|
137
|
+
- The `fill` attribute is removed from all child elements and set to `currentColor` on the root `<svg>`.
|
|
138
|
+
- This allows you to control the icon color from CSS or inline styles, making the icons highly flexible and themeable.
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
MIT © ALS Computing
|
|
8
147
|
|
|
9
148
|
When new assets are committed, this repository automatically triggers the icon-library repository to process, optimize, and publish the icons to npm.
|
|
10
149
|
|