@btndprojects/loam-icons 0.1.0 → 0.1.1
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 +66 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://loam.btndprojects.com"><img src="https://loam.btndprojects.com/apple-touch-icon.png" width="64" height="64" alt="Loam"></a>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">@btndprojects/loam-icons</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">The Loam icon set — framework-agnostic SVG data, shared by the web and native renderers.</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<a href="https://www.npmjs.com/package/@btndprojects/loam-icons"><img src="https://img.shields.io/npm/v/@btndprojects/loam-icons?color=c0563a&label=npm" alt="npm version"></a>
|
|
11
|
+
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-3d7a48" alt="MIT license"></a>
|
|
12
|
+
<a href="https://loam.btndprojects.com"><img src="https://img.shields.io/badge/docs-loam.btndprojects.com-8c3a25" alt="Documentation"></a>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
One outline set on a 24px grid with a 2px stroke and round caps and joins. Icons are stored as plain data, not components, so the same set renders on the web, on React Native, or anywhere else you can draw SVG.
|
|
16
|
+
|
|
17
|
+
## Install
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
npm install @btndprojects/loam-icons
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
With Loam's component libraries you don't need to touch this package: use their `Icon` component (`<Icon name="check" />`).
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
Render an icon with your own renderer:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { icons, ICON_VIEWBOX, type IconName } from '@btndprojects/loam-icons';
|
|
31
|
+
|
|
32
|
+
export function Icon({ name, size = 20 }: { name: IconName; size?: number }) {
|
|
33
|
+
return (
|
|
34
|
+
<svg width={size} height={size} viewBox={ICON_VIEWBOX} fill="none" stroke="currentColor"
|
|
35
|
+
strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
|
36
|
+
{icons[name].map((p, i) => {
|
|
37
|
+
switch (p.t) {
|
|
38
|
+
case 'path': return <path key={i} d={p.d} />;
|
|
39
|
+
case 'circle': return <circle key={i} cx={p.cx} cy={p.cy} r={p.r} fill={p.fill ? 'currentColor' : undefined} />;
|
|
40
|
+
case 'line': return <line key={i} x1={p.x1} y1={p.y1} x2={p.x2} y2={p.y2} />;
|
|
41
|
+
case 'rect': return <rect key={i} x={p.x} y={p.y} width={p.width} height={p.height} rx={p.rx} ry={p.ry} />;
|
|
42
|
+
case 'polyline': return <polyline key={i} points={p.points} />;
|
|
43
|
+
case 'polygon': return <polygon key={i} points={p.points} />;
|
|
44
|
+
}
|
|
45
|
+
})}
|
|
46
|
+
</svg>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Credits
|
|
52
|
+
|
|
53
|
+
The icon artwork comes from [Lucide](https://lucide.dev) (ISC), which itself builds on [Feather](https://feathericons.com) (MIT). See [`THIRD-PARTY-NOTICES`](./THIRD-PARTY-NOTICES).
|
|
54
|
+
|
|
55
|
+
## Documentation
|
|
56
|
+
|
|
57
|
+
Guides, live examples and the full API are on **[loam.btndprojects.com](https://loam.btndprojects.com)** — start with [Iconography](https://loam.btndprojects.com/#/foundations/icons).
|
|
58
|
+
|
|
59
|
+
## Related packages
|
|
60
|
+
|
|
61
|
+
- [`@btndprojects/loam-ui-web`](https://www.npmjs.com/package/@btndprojects/loam-ui-web) — renders these icons on the web
|
|
62
|
+
- [`@btndprojects/loam-ui-native`](https://www.npmjs.com/package/@btndprojects/loam-ui-native) — renders these icons on React Native
|
|
63
|
+
|
|
64
|
+
## License
|
|
65
|
+
|
|
66
|
+
MIT © Nuszpl Botond
|
package/package.json
CHANGED