Skip to content

Commit ae66e73

Browse files
RaresAilRaresAil
authored
use the css color for fill and stroke (#2)
1 parent 966ba18 commit ae66e73

File tree

8 files changed

+62
-65
lines changed

8 files changed

+62
-65
lines changed

‎.github/workflows/node.js.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jobs:
1111

1212
strategy:
1313
matrix:
14-
node-version: [18.x, 19.x, 20.x, 21.x]
14+
node-version: [18.x, 20.x, 21.x]
1515

1616
steps:
1717
- uses: actions/checkout@v4

‎.svgrrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = {
88
icon: true,
99
svgProps: {
1010
className: '{className}',
11-
fill: "{'#000'}",
11+
fill: 'currentColor',
1212
style: '{style}'
1313
}
1414
};

‎README.md‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,16 @@ Import the icons
2222
import { AddCircleOutline } from '@raresail/react-ionicons';
2323
```
2424

25-
Use the icon, to change the size of the icon use the `font-size` property
25+
Use the icon, to change the size of the icon use the `font-size` CSS property and for the color (fill or stroke) use the `color` CSS property
2626

2727
```tsx
2828
function Component() {
2929
return (
3030
<AddCircleOutline
31-
// To change the icon color
32-
color="red"
33-
// To change any style related to the svg or font size
31+
// To change any style related to the svg, font size or color
3432
style={{
35-
fontSize: '20px'
33+
fontSize: '20px',
34+
color: 'red'
3635
}}
3736
// If you need to add extra props use
3837
svgProps={{}}
@@ -53,4 +52,3 @@ function Component() {
5352
| style | CSSProperties | {} |
5453
| strokeWidth | number | 32 or 16 |
5554
| className | string | |
56-
| color | string | #000 |

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@raresail/react-ionicons",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"repository": "git@github.com:RaresAil/react-ionicons.git",
55
"author": "RaresAil <rares.ailincai@raresdesigns.com>",
66
"license": "MIT",
@@ -18,8 +18,8 @@
1818
"@rollup/plugin-typescript": "^11.1.6",
1919
"@svgr/cli": "^8.1.0",
2020
"@types/react": "^18.2.70",
21-
"@typescript-eslint/eslint-plugin": "^6.13.2",
22-
"@typescript-eslint/parser": "^6.13.2",
21+
"@typescript-eslint/eslint-plugin": "^7.4.0",
22+
"@typescript-eslint/parser": "^7.4.0",
2323
"eslint": "^8.55.0",
2424
"eslint-config-standard": "^17.1.0",
2525
"eslint-plugin-import": "^2.29.0",

‎post-build-icons.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const path = require('path');
1717
await fs.writeFile(
1818
iconPath,
1919
content
20-
.replace(/'#000'/gm, "color || '#000'")
21-
.replace(/"#000"/gm, "{color || '#000'}")
20+
.replace(/'#000'/gm, "'currentColor'")
21+
.replace(/"#000"/gm, '"currentColor"')
2222
.replace(
2323
/strokeWidth={([0-9]+)}/gm,
2424
'strokeWidth={strokeWidth === undefined ? $1 : strokeWidth}'

‎src/types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,4 @@ export interface IonIconProps {
55
style?: CSSProperties;
66
strokeWidth?: number;
77
className?: string;
8-
color?: string;
98
}

‎templates/svg.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const propTypesTemplate = (
66
import type { IonIconProps } from '../types';
77
${interfaces}
88
9-
function ${componentName}({ className, strokeWidth, color, style, svgProps: props }: IonIconProps) {
9+
function ${componentName}({ className, strokeWidth, style, svgProps: props }: IonIconProps) {
1010
return ${jsx};
1111
}
1212

‎yarn.lock‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -604,90 +604,90 @@
604604
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
605605
integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
606606

607-
"@typescript-eslint/eslint-plugin@^6.13.2":
608-
version "6.21.0"
609-
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
610-
integrity sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==
607+
"@typescript-eslint/eslint-plugin@^7.4.0":
608+
version "7.4.0"
609+
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.4.0.tgz#de61c3083842fc6ac889d2fc83c9a96b55ab8328"
610+
integrity sha512-yHMQ/oFaM7HZdVrVm/M2WHaNPgyuJH4WelkSVEWSSsir34kxW2kDJCxlXRhhGWEsMN0WAW/vLpKfKVcm8k+MPw==
611611
dependencies:
612612
"@eslint-community/regexpp" "^4.5.1"
613-
"@typescript-eslint/scope-manager" "6.21.0"
614-
"@typescript-eslint/type-utils" "6.21.0"
615-
"@typescript-eslint/utils" "6.21.0"
616-
"@typescript-eslint/visitor-keys" "6.21.0"
613+
"@typescript-eslint/scope-manager" "7.4.0"
614+
"@typescript-eslint/type-utils" "7.4.0"
615+
"@typescript-eslint/utils" "7.4.0"
616+
"@typescript-eslint/visitor-keys" "7.4.0"
617617
debug "^4.3.4"
618618
graphemer "^1.4.0"
619619
ignore "^5.2.4"
620620
natural-compare "^1.4.0"
621621
semver "^7.5.4"
622622
ts-api-utils "^1.0.1"
623623

624-
"@typescript-eslint/parser@^6.13.2":
625-
version "6.21.0"
626-
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
627-
integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
624+
"@typescript-eslint/parser@^7.4.0":
625+
version "7.4.0"
626+
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.4.0.tgz#540f4321de1e52b886c0fa68628af1459954c1f1"
627+
integrity sha512-ZvKHxHLusweEUVwrGRXXUVzFgnWhigo4JurEj0dGF1tbcGh6buL+ejDdjxOQxv6ytcY1uhun1p2sm8iWStlgLQ==
628628
dependencies:
629-
"@typescript-eslint/scope-manager" "6.21.0"
630-
"@typescript-eslint/types" "6.21.0"
631-
"@typescript-eslint/typescript-estree" "6.21.0"
632-
"@typescript-eslint/visitor-keys" "6.21.0"
629+
"@typescript-eslint/scope-manager" "7.4.0"
630+
"@typescript-eslint/types" "7.4.0"
631+
"@typescript-eslint/typescript-estree" "7.4.0"
632+
"@typescript-eslint/visitor-keys" "7.4.0"
633633
debug "^4.3.4"
634634

635-
"@typescript-eslint/scope-manager@6.21.0":
636-
version "6.21.0"
637-
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
638-
integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
635+
"@typescript-eslint/scope-manager@7.4.0":
636+
version "7.4.0"
637+
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.4.0.tgz#acfc69261f10ece7bf7ece1734f1713392c3655f"
638+
integrity sha512-68VqENG5HK27ypafqLVs8qO+RkNc7TezCduYrx8YJpXq2QGZ30vmNZGJJJC48+MVn4G2dCV8m5ZTVnzRexTVtw==
639639
dependencies:
640-
"@typescript-eslint/types" "6.21.0"
641-
"@typescript-eslint/visitor-keys" "6.21.0"
640+
"@typescript-eslint/types" "7.4.0"
641+
"@typescript-eslint/visitor-keys" "7.4.0"
642642

643-
"@typescript-eslint/type-utils@6.21.0":
644-
version "6.21.0"
645-
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz#6473281cfed4dacabe8004e8521cee0bd9d4c01e"
646-
integrity sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==
643+
"@typescript-eslint/type-utils@7.4.0":
644+
version "7.4.0"
645+
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.4.0.tgz#cfcaab21bcca441c57da5d3a1153555e39028cbd"
646+
integrity sha512-247ETeHgr9WTRMqHbbQdzwzhuyaJ8dPTuyuUEMANqzMRB1rj/9qFIuIXK7l0FX9i9FXbHeBQl/4uz6mYuCE7Aw==
647647
dependencies:
648-
"@typescript-eslint/typescript-estree" "6.21.0"
649-
"@typescript-eslint/utils" "6.21.0"
648+
"@typescript-eslint/typescript-estree" "7.4.0"
649+
"@typescript-eslint/utils" "7.4.0"
650650
debug "^4.3.4"
651651
ts-api-utils "^1.0.1"
652652

653-
"@typescript-eslint/types@6.21.0":
654-
version "6.21.0"
655-
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
656-
integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
653+
"@typescript-eslint/types@7.4.0":
654+
version "7.4.0"
655+
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.4.0.tgz#ee9dafa75c99eaee49de6dcc9348b45d354419b6"
656+
integrity sha512-mjQopsbffzJskos5B4HmbsadSJQWaRK0UxqQ7GuNA9Ga4bEKeiO6b2DnB6cM6bpc8lemaPseh0H9B/wyg+J7rw==
657657

658-
"@typescript-eslint/typescript-estree@6.21.0":
659-
version "6.21.0"
660-
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
661-
integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
658+
"@typescript-eslint/typescript-estree@7.4.0":
659+
version "7.4.0"
660+
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.4.0.tgz#12dbcb4624d952f72c10a9f4431284fca24624f4"
661+
integrity sha512-A99j5AYoME/UBQ1ucEbbMEmGkN7SE0BvZFreSnTd1luq7yulcHdyGamZKizU7canpGDWGJ+Q6ZA9SyQobipePg==
662662
dependencies:
663-
"@typescript-eslint/types" "6.21.0"
664-
"@typescript-eslint/visitor-keys" "6.21.0"
663+
"@typescript-eslint/types" "7.4.0"
664+
"@typescript-eslint/visitor-keys" "7.4.0"
665665
debug "^4.3.4"
666666
globby "^11.1.0"
667667
is-glob "^4.0.3"
668668
minimatch "9.0.3"
669669
semver "^7.5.4"
670670
ts-api-utils "^1.0.1"
671671

672-
"@typescript-eslint/utils@6.21.0":
673-
version "6.21.0"
674-
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
675-
integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
672+
"@typescript-eslint/utils@7.4.0":
673+
version "7.4.0"
674+
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.4.0.tgz#d889a0630cab88bddedaf7c845c64a00576257bd"
675+
integrity sha512-NQt9QLM4Tt8qrlBVY9lkMYzfYtNz8/6qwZg8pI3cMGlPnj6mOpRxxAm7BMJN9K0AiY+1BwJ5lVC650YJqYOuNg==
676676
dependencies:
677677
"@eslint-community/eslint-utils" "^4.4.0"
678678
"@types/json-schema" "^7.0.12"
679679
"@types/semver" "^7.5.0"
680-
"@typescript-eslint/scope-manager" "6.21.0"
681-
"@typescript-eslint/types" "6.21.0"
682-
"@typescript-eslint/typescript-estree" "6.21.0"
680+
"@typescript-eslint/scope-manager" "7.4.0"
681+
"@typescript-eslint/types" "7.4.0"
682+
"@typescript-eslint/typescript-estree" "7.4.0"
683683
semver "^7.5.4"
684684

685-
"@typescript-eslint/visitor-keys@6.21.0":
686-
version "6.21.0"
687-
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
688-
integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
685+
"@typescript-eslint/visitor-keys@7.4.0":
686+
version "7.4.0"
687+
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.4.0.tgz#0c8ff2c1f8a6fe8d7d1a57ebbd4a638e86a60a94"
688+
integrity sha512-0zkC7YM0iX5Y41homUUeW1CHtZR01K3ybjM1l6QczoMuay0XKtrb93kv95AxUGwdjGr64nNqnOCwmEl616N8CA==
689689
dependencies:
690-
"@typescript-eslint/types" "6.21.0"
690+
"@typescript-eslint/types" "7.4.0"
691691
eslint-visitor-keys "^3.4.1"
692692

693693
"@ungap/structured-clone@^1.2.0":

0 commit comments

Comments
 (0)