@central-icons-react-native/round-filled-radius-3-stroke-1 1.1.292 → 1.1.294
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/IconBase44/index.d.ts +4 -0
- package/IconBase44/index.js +3 -0
- package/IconBase44/index.js.map +11 -0
- package/IconBase44/index.mjs +3 -0
- package/IconBase44/index.mjs.map +11 -0
- package/IconBookHeart/index.d.ts +4 -0
- package/IconBookHeart/index.js +3 -0
- package/IconBookHeart/index.js.map +11 -0
- package/IconBookHeart/index.mjs +3 -0
- package/IconBookHeart/index.mjs.map +11 -0
- package/IconDatabricks/index.d.ts +4 -0
- package/IconDatabricks/index.js +3 -0
- package/IconDatabricks/index.js.map +11 -0
- package/IconDatabricks/index.mjs +3 -0
- package/IconDatabricks/index.mjs.map +11 -0
- package/IconDatabricksGenieCode/index.d.ts +4 -0
- package/IconDatabricksGenieCode/index.js +3 -0
- package/IconDatabricksGenieCode/index.js.map +11 -0
- package/IconDatabricksGenieCode/index.mjs +3 -0
- package/IconDatabricksGenieCode/index.mjs.map +11 -0
- package/IconEmail2Block/index.d.ts +4 -0
- package/IconEmail2Block/index.js +3 -0
- package/IconEmail2Block/index.js.map +11 -0
- package/IconEmail2Block/index.mjs +3 -0
- package/IconEmail2Block/index.mjs.map +11 -0
- package/IconEmail2Check/index.d.ts +4 -0
- package/IconEmail2Check/index.js +3 -0
- package/IconEmail2Check/index.js.map +11 -0
- package/IconEmail2Check/index.mjs +3 -0
- package/IconEmail2Check/index.mjs.map +11 -0
- package/IconEmail2Incoming/index.d.ts +4 -0
- package/IconEmail2Incoming/index.js +3 -0
- package/IconEmail2Incoming/index.js.map +11 -0
- package/IconEmail2Incoming/index.mjs +3 -0
- package/IconEmail2Incoming/index.mjs.map +11 -0
- package/IconEmail2Plus/index.d.ts +4 -0
- package/IconEmail2Plus/index.js +3 -0
- package/IconEmail2Plus/index.js.map +11 -0
- package/IconEmail2Plus/index.mjs +3 -0
- package/IconEmail2Plus/index.mjs.map +11 -0
- package/IconEmail2Remove/index.d.ts +4 -0
- package/IconEmail2Remove/index.js +3 -0
- package/IconEmail2Remove/index.js.map +11 -0
- package/IconEmail2Remove/index.mjs +3 -0
- package/IconEmail2Remove/index.mjs.map +11 -0
- package/IconEmail2Unread/index.d.ts +4 -0
- package/IconEmail2Unread/index.js +3 -0
- package/IconEmail2Unread/index.js.map +11 -0
- package/IconEmail2Unread/index.mjs +3 -0
- package/IconEmail2Unread/index.mjs.map +11 -0
- package/README.md +31 -0
- package/filtered-icons.json +1 -1
- package/icons/index.d.ts +1 -1
- package/icons/index.js +2 -2
- package/icons/index.js.map +3 -3
- package/icons/index.mjs +2 -2
- package/icons/index.mjs.map +3 -3
- package/icons-index.json +4 -4
- package/index.d.ts +10 -0
- package/index.js +30 -0
- package/index.mjs +10 -0
- package/license-check.js +1 -1
- package/package.json +1 -1
- package/skills/central-icons-react-native/SKILL.md +21 -2
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@ A collection of round filled React icons with 3px radius and 1px stroke width, d
|
|
|
8
8
|
- [Installation](#installation)
|
|
9
9
|
- [Requirements](#requirements)
|
|
10
10
|
- [Usage](#usage)
|
|
11
|
+
- [Using Transparent Colors](#using-transparent-colors)
|
|
11
12
|
- [Icon Properties](#icon-properties)
|
|
12
13
|
- [Accessibility](#accessibility)
|
|
13
14
|
- [Available Packages](#available-packages)
|
|
@@ -95,6 +96,22 @@ function MyComponent() {
|
|
|
95
96
|
}
|
|
96
97
|
```
|
|
97
98
|
|
|
99
|
+
## Using transparent colors
|
|
100
|
+
|
|
101
|
+
Each icon is drawn from several overlapping shapes — strokes and fills — all painted with the current color. If that color already carries transparency (an alpha channel), every shape is drawn semi-transparent, so the places where shapes overlap get painted twice and look darker than the rest of the icon.
|
|
102
|
+
|
|
103
|
+
To apply a see-through color evenly, keep the color solid and set the transparency with `opacity` instead. `opacity` fades the whole icon as a single layer, so overlaps no longer stack:
|
|
104
|
+
|
|
105
|
+
```jsx
|
|
106
|
+
// ❌ overlaps look darker — the color carries transparency
|
|
107
|
+
<IconHome color="rgba(0, 0, 0, 0.5)" />
|
|
108
|
+
|
|
109
|
+
// ✅ uniform — solid color, transparency applied with opacity
|
|
110
|
+
<IconHome color="black" opacity={0.5} />
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
React Native has no `currentColor`/CSS cascade, so apply the same idea with props: pass a solid `color` and set `opacity` on the icon. With NativeWind, use the `opacity-50` class rather than a color that carries an alpha channel.
|
|
114
|
+
|
|
98
115
|
## Icon Properties
|
|
99
116
|
|
|
100
117
|
All icons accept the following properties:
|
|
@@ -588,6 +605,13 @@ Below is a complete list of available icons:
|
|
|
588
605
|
- IconChatBubble7
|
|
589
606
|
- IconChatBubbles
|
|
590
607
|
- IconMailbox
|
|
608
|
+
- IconEmail2Plus
|
|
609
|
+
- IconEmail2Remove
|
|
610
|
+
- IconEmail2Incoming
|
|
611
|
+
- IconEmail2Block
|
|
612
|
+
- IconEmail2Check
|
|
613
|
+
- IconEmail2Unread
|
|
614
|
+
- IconBookHeart
|
|
591
615
|
|
|
592
616
|
### Crypto
|
|
593
617
|
|
|
@@ -1856,6 +1880,9 @@ Below is a complete list of available icons:
|
|
|
1856
1880
|
- IconJira
|
|
1857
1881
|
- IconConfluence
|
|
1858
1882
|
- IconTodoist
|
|
1883
|
+
- IconBase44
|
|
1884
|
+
- IconDatabricks
|
|
1885
|
+
- IconDatabricksGenieCode
|
|
1859
1886
|
|
|
1860
1887
|
### Sound & Music
|
|
1861
1888
|
|
|
@@ -2363,3 +2390,7 @@ Common issues and solutions:
|
|
|
2363
2390
|
3. **Bundle size concerns**
|
|
2364
2391
|
- Use specific imports instead of the main entry point
|
|
2365
2392
|
- Use a build tool supporting tree shaking
|
|
2393
|
+
|
|
2394
|
+
4. **Icons look darker where lines overlap**
|
|
2395
|
+
|
|
2396
|
+
- You're likely using a semi-transparent `color` (one with an alpha channel). Keep the color solid and apply transparency with `opacity` instead — see [Using transparent colors](#using-transparent-colors).
|