@central-icons-react/round-filled-radius-3-stroke-1 0.0.5 → 0.0.6

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.
Files changed (2) hide show
  1. package/README.md +77 -35
  2. package/package.json +8 -8
package/README.md CHANGED
@@ -2,11 +2,27 @@
2
2
 
3
3
  A collection of round filled React icons with 3px radius and 1px stroke width, designed for use in React applications.
4
4
 
5
+ ## Table of Contents
6
+
7
+ - [Installation](#installation)
8
+ - [Requirements](#requirements)
9
+ - [Usage](#usage)
10
+ - [Icon Properties](#icon-properties)
11
+ - [Accessibility](#accessibility)
12
+ - [Available Packages](#available-packages)
13
+ - [Icons List](#icons)
14
+ - [License](#license)
15
+ - [Troubleshooting](#troubleshooting)
16
+
5
17
  ## Installation
6
18
 
7
- This package is private and can be installed via your organization's private npm registry:
19
+ This package is private and can be installed via your organization's private npm registry. Make sure you have the required license key set up before installation.
8
20
 
9
21
  ```bash
22
+ # Set your license key first
23
+ export CENTRAL_LICENSE_KEY=your_license_key
24
+
25
+ # Then install using your preferred package manager
10
26
  npm install @central-icons-react/round-filled-radius-3-stroke-1
11
27
  # or
12
28
  yarn add @central-icons-react/round-filled-radius-3-stroke-1
@@ -17,16 +33,17 @@ pnpm add @central-icons-react/round-filled-radius-3-stroke-1
17
33
  ## Requirements
18
34
 
19
35
  - React 16.0.0 or higher
36
+ - Valid license key (set as environment variable)
20
37
 
21
38
  ## Usage
22
39
 
23
40
  Icons can be imported individually to keep your bundle size minimal:
24
41
 
25
42
  ```jsx
26
- import { IconName } from "@central-icons-react/round-filled-radius-3-stroke-1/IconName";
43
+ import IconHome from "@central-icons-react/round-filled-radius-3-stroke-1/Home";
27
44
 
28
45
  function MyComponent() {
29
- return <IconName />;
46
+ return <IconHome />;
30
47
  }
31
48
  ```
32
49
 
@@ -42,49 +59,46 @@ function MyComponent() {
42
59
 
43
60
  ## Icon Properties
44
61
 
45
- Each icon component accepts the following props:
46
-
47
- - All standard SVG attributes
48
- - All standard HTML attributes
49
- - `size`: `number | string` (sets both width and height - default: `24px`)
50
- - `color`: `string` (sets the icon color - default: inherits font color)
51
- - `ariaHidden`: `boolean` (sets aria attributes - defaut: `true`)
52
-
53
- Example:
62
+ All icons accept the following properties:
54
63
 
55
- ```jsx
56
- <IconName size={24} color="#000000" />
57
- ```
58
-
59
- ## License
64
+ | Prop | Type | Default | Description |
65
+ | ------------ | -------------------------- | -------------- | ------------------------------------------------------------ |
66
+ | `size` | `number \| string` | `24` | Sets both width and height of the icon |
67
+ | `color` | `string` | `currentColor` | Sets the icon color |
68
+ | `ariaHidden` | `boolean` | `true` | Controls icon accessibility attributes |
69
+ | `iconJoin` | `"round" \| "square"` | `"round"` | Controls the icon's corner style |
70
+ | `iconFill` | `"filled" \| "outlined"` | `"filled"` | Sets the icon's fill style |
71
+ | `iconStroke` | `"1" \| "1.5" \| "2"` | `"1"` | Controls the stroke width |
72
+ | `iconRadius` | `"0" \| "1" \| "2" \| "3"` | `"1"` | Sets the corner radius |
73
+ | `name` | `string` | none | Defines which icon should be used - see [Icons List](#icons) |
60
74
 
61
- This is a private package. All rights reserved. Unauthorized copying or distribution is prohibited.
62
- Licenses can be bought at https://iconists.co/central
75
+ Additionally, all standard SVG and HTML attributes are supported.
63
76
 
64
- The license key needs to be present as env variable on install time
77
+ ## Accessibility
65
78
 
66
- Example:
67
-
68
- ```sh
69
- CENTRAL_LICENSE_KEY=your_license_key npm install
70
- ```
71
-
72
- ## Accessability
73
-
74
- All Icons are aria-hidden by default. When aria-hidden is turned off a title will be added to the svg and the aria-role will be `img`. See https://css-tricks.com/accessible-svg-icons/ for use cases.
75
-
76
- Example:
79
+ Icons are aria-hidden by default for decorative purposes. When using icons that convey meaning, you should disable aria-hidden:
77
80
 
78
81
  ```jsx
79
- <IconName ariaHidden={false} /> // Role: img - adds title
82
+ // Decorative icon (default)
83
+ <IconHome /> // Will be hidden from screen readers
84
+
85
+ // Meaningful icon
86
+ <IconHome
87
+ ariaHidden={false}
88
+ title="Go to home page" // optional - title describing the icon will be added as fallback
89
+ /> // Will be announced by screen readers
80
90
  ```
81
91
 
82
- ```jsx
83
- <IconName ariaHidden={true} /> // default - aria-hidden
84
- ```
92
+ When `ariaHidden` is `false`:
93
+
94
+ - A title element is added to the SVG
95
+ - The element gets `role="img"` attribute
96
+ - Screen readers will announce the icon's title
85
97
 
86
98
  ## Available Packages
87
99
 
100
+ For optimal bundle size, consider using our specific bundles instead of the full package:
101
+
88
102
  https://npmjs.com/package/@central-icons-react/square-outlined-radius-0-stroke-2
89
103
  https://npmjs.com/package/@central-icons-react/square-filled-radius-0-stroke-2
90
104
  https://npmjs.com/package/@central-icons-react/round-outlined-radius-0-stroke-2
@@ -118,6 +132,8 @@ https://npmjs.com/package/@central-icons-react/round-filled-radius-3-stroke-1
118
132
 
119
133
  ## Icons
120
134
 
135
+ Below is a complete list of available icons:
136
+
121
137
  ### Accessibility
122
138
 
123
139
  - CircleHalfFill
@@ -1606,3 +1622,29 @@ https://npmjs.com/package/@central-icons-react/round-filled-radius-3-stroke-1
1606
1622
  - Thermostat
1607
1623
  - Thunder
1608
1624
  - Wind
1625
+
1626
+ ## License
1627
+
1628
+ This is a private package with all rights reserved. Unauthorized copying or distribution is prohibited.
1629
+
1630
+ - Licenses can be purchased at: https://iconists.co/central
1631
+ - License key must be present as an environment variable during installation
1632
+
1633
+ ## Troubleshooting
1634
+
1635
+ Common issues and solutions:
1636
+
1637
+ 1. **Installation fails**
1638
+
1639
+ - Ensure `CENTRAL_LICENSE_KEY` is set correctly
1640
+ - Verify npm registry access
1641
+
1642
+ 2. **Icons not rendering**
1643
+
1644
+ - Check if the icon name is correct
1645
+ - Verify all required props are provided
1646
+ - Ensure React version meets requirements
1647
+
1648
+ 3. **Bundle size concerns**
1649
+ - Use specific imports instead of the main entry point
1650
+ - Use a build tool supporting tree shaking
package/package.json CHANGED
@@ -1,19 +1,12 @@
1
1
  {
2
2
  "name": "@central-icons-react/round-filled-radius-3-stroke-1",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "license": "SEE LICENSE IN LICENSE.md",
5
5
  "homepage": "https://iconists.co/central",
6
6
  "sideEffects": false,
7
7
  "main": "./index.js",
8
8
  "module": "./index.mjs",
9
9
  "types": "./index.d.ts",
10
- "files": [
11
- "**/*.js",
12
- "**/*.mjs",
13
- "**/*.map",
14
- "**/*.d.ts",
15
- "**/*.md"
16
- ],
17
10
  "exports": {
18
11
  ".": {
19
12
  "types": "./index.d.ts",
@@ -26,6 +19,13 @@
26
19
  "require": "./*/index.js"
27
20
  }
28
21
  },
22
+ "files": [
23
+ "**/*.js",
24
+ "**/*.mjs",
25
+ "**/*.map",
26
+ "**/*.d.ts",
27
+ "**/*.md"
28
+ ],
29
29
  "scripts": {
30
30
  "preinstall": "node ./license-check.js",
31
31
  "prebuild": "tsc",