@geneui/icons 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 +73 -0
- package/index.js +3 -0
- package/package.json +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @geneui/icons
|
|
2
|
+
|
|
3
|
+
> The icons library created for the Gene UI design system.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@geneui/icons)
|
|
6
|
+
[](https://github.com/softconstruct/gene-ui-icons/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
## Getting Started
|
|
9
|
+
|
|
10
|
+
The icons in this package are now available as full React components, making it easy to integrate
|
|
11
|
+
them directly into your project.
|
|
12
|
+
|
|
13
|
+
## ⚙️ Installation
|
|
14
|
+
|
|
15
|
+
1. Install `@geneui/icons` as a dependency:
|
|
16
|
+
|
|
17
|
+
Using [NPM](https://www.npmjs.com/):
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @geneui/icons --save
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Or, using [Yarn](https://yarnpkg.com/en/):
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add @geneui/icons
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 👨💻 Usage
|
|
30
|
+
|
|
31
|
+
To utilize the icons from the Gene UI icons collection as React components with customizable size
|
|
32
|
+
and color, follow these steps:
|
|
33
|
+
|
|
34
|
+
1. **Import an Icon:**
|
|
35
|
+
|
|
36
|
+
Import the desired icon directly from the Gene UI icons collection. For example, to import the
|
|
37
|
+
`Check` icon:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { Check } from '@geneui/icons';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
2. **Use the Icon as a Component:**
|
|
44
|
+
|
|
45
|
+
Use the imported icon directly in your JSX and customize it with `size` and `color` props:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<Check size={24} color="red" />
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Icon Props
|
|
52
|
+
|
|
53
|
+
The icons accept the following props:
|
|
54
|
+
|
|
55
|
+
- **`size`** (optional): Defines the size of the icon. Can be one of `16`, `20`, `24`, `28`, `32`,
|
|
56
|
+
`48`.
|
|
57
|
+
- **`color`** (optional): Defines the color of the icon. Accepts any valid CSS color value.
|
|
58
|
+
|
|
59
|
+
This allows you to seamlessly integrate and customize icons from the Gene UI icons collection as
|
|
60
|
+
React components in your project.
|
|
61
|
+
|
|
62
|
+
## 👍 Contributing
|
|
63
|
+
|
|
64
|
+
We welcome contributions from the community! Here's how you can get involved to add, remove, or
|
|
65
|
+
rename icons:
|
|
66
|
+
|
|
67
|
+
> 👉 See the
|
|
68
|
+
> [contributing docs](https://github.com/softconstruct/gene-ui-icons/blob/main/CONTRIBUTING.md).
|
|
69
|
+
|
|
70
|
+
## ⚖️ License
|
|
71
|
+
|
|
72
|
+
The Gene UI design system's icons are licensed under the
|
|
73
|
+
[MIT License](https://github.com/softconstruct/gene-ui-icons/blob/main/LICENSE).
|
package/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@geneui/icons",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Gene UI icons distributed as SVG React components.",
|
|
5
|
+
"author": "SoftConstruct",
|
|
6
|
+
"main": "index.js",
|
|
7
|
+
"module": "index.js",
|
|
8
|
+
"types": "index.d.ts",
|
|
9
|
+
"contributors": [
|
|
10
|
+
"Hamik Hambardzumyan <hamik.hambardumyan@softconstruct.com> (https://github.com/hamikhambardzumyan)"
|
|
11
|
+
],
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "babel-node --config-file ./configs/.babelrc ./scripts/build.js",
|
|
15
|
+
"create-icon": "babel-node --config-file ./configs/.babelrc ./scripts/createIcon.js",
|
|
16
|
+
"remove-icon": "babel-node --config-file ./configs/.babelrc ./scripts/removeIcon.js",
|
|
17
|
+
"update-icon": "",
|
|
18
|
+
"mark-as-deprecated": "",
|
|
19
|
+
"bump-up-commit": "babel-node --config-file ./configs/.babelrc ./scripts/postPublish.js"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist/*"
|
|
23
|
+
],
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@babel/cli": "^7.18.9",
|
|
26
|
+
"@babel/core": "^7.18.9",
|
|
27
|
+
"@babel/node": "^7.18.9",
|
|
28
|
+
"@babel/plugin-proposal-export-default-from": "^7.18.10",
|
|
29
|
+
"@babel/preset-env": "^7.18.9",
|
|
30
|
+
"@babel/preset-react": "^7.18.6",
|
|
31
|
+
"@rollup/plugin-babel": "^6.0.0",
|
|
32
|
+
"@rollup/plugin-virtual": "^3.0.1",
|
|
33
|
+
"@svgr/core": "^6.3.1",
|
|
34
|
+
"boxen": "^5.1.2",
|
|
35
|
+
"chalk": "^4.1.2",
|
|
36
|
+
"figlet": "^1.5.2",
|
|
37
|
+
"filesize": "^10.0.6",
|
|
38
|
+
"glob": "^8.0.3",
|
|
39
|
+
"inquirer": "^8.2.4",
|
|
40
|
+
"ora": "^5.4.1",
|
|
41
|
+
"prettier": "^2.6.2",
|
|
42
|
+
"rollup": "^3.1.0",
|
|
43
|
+
"svgo": "^2.8.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
|
47
|
+
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
48
|
+
}
|
|
49
|
+
}
|