@central-icons-react-native/round-outlined-radius-0-stroke-2 1.1.291 → 1.1.293
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/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/IconSuitcase/index.js +2 -2
- package/IconSuitcase/index.js.map +3 -3
- package/IconSuitcase/index.mjs +2 -2
- package/IconSuitcase/index.mjs.map +3 -3
- package/IconTodoist/index.d.ts +4 -0
- package/IconTodoist/index.js +3 -0
- package/IconTodoist/index.js.map +11 -0
- package/IconTodoist/index.mjs +3 -0
- package/IconTodoist/index.mjs.map +11 -0
- package/README.md +30 -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 +9 -0
- package/index.js +27 -0
- package/index.mjs +9 -0
- package/license-check.js +1 -1
- package/package.json +1 -1
- package/skills/central-icons-react-native/SKILL.md +20 -2
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@ A collection of round outlined React icons with 0px radius and 2px stroke width,
|
|
|
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
|
|
|
@@ -1855,6 +1879,8 @@ Below is a complete list of available icons:
|
|
|
1855
1879
|
- IconAtlassian
|
|
1856
1880
|
- IconJira
|
|
1857
1881
|
- IconConfluence
|
|
1882
|
+
- IconTodoist
|
|
1883
|
+
- IconBase44
|
|
1858
1884
|
|
|
1859
1885
|
### Sound & Music
|
|
1860
1886
|
|
|
@@ -2362,3 +2388,7 @@ Common issues and solutions:
|
|
|
2362
2388
|
3. **Bundle size concerns**
|
|
2363
2389
|
- Use specific imports instead of the main entry point
|
|
2364
2390
|
- Use a build tool supporting tree shaking
|
|
2391
|
+
|
|
2392
|
+
4. **Icons look darker where lines overlap**
|
|
2393
|
+
|
|
2394
|
+
- 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).
|