@iconify-icon/react 3.0.2 → 3.0.4
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/.oxfmtrc.json +11 -0
- package/.oxlintrc.json +40 -0
- package/package.json +18 -15
- package/readme.md +19 -19
package/.oxfmtrc.json
ADDED
package/.oxlintrc.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
|
3
|
+
"plugins": null,
|
|
4
|
+
"categories": {},
|
|
5
|
+
"rules": {},
|
|
6
|
+
"settings": {
|
|
7
|
+
"jsx-a11y": {
|
|
8
|
+
"polymorphicPropName": null,
|
|
9
|
+
"components": {},
|
|
10
|
+
"attributes": {}
|
|
11
|
+
},
|
|
12
|
+
"next": {
|
|
13
|
+
"rootDir": []
|
|
14
|
+
},
|
|
15
|
+
"react": {
|
|
16
|
+
"formComponents": [],
|
|
17
|
+
"linkComponents": [],
|
|
18
|
+
"version": null,
|
|
19
|
+
"componentWrapperFunctions": []
|
|
20
|
+
},
|
|
21
|
+
"jsdoc": {
|
|
22
|
+
"ignorePrivate": false,
|
|
23
|
+
"ignoreInternal": false,
|
|
24
|
+
"ignoreReplacesDocs": true,
|
|
25
|
+
"overrideReplacesDocs": true,
|
|
26
|
+
"augmentsExtendsReplacesDocs": false,
|
|
27
|
+
"implementsReplacesDocs": false,
|
|
28
|
+
"exemptDestructuredRootsFromChecks": false,
|
|
29
|
+
"tagNamePreference": {}
|
|
30
|
+
},
|
|
31
|
+
"vitest": {
|
|
32
|
+
"typecheck": false
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"env": {
|
|
36
|
+
"builtin": true
|
|
37
|
+
},
|
|
38
|
+
"globals": {},
|
|
39
|
+
"ignorePatterns": []
|
|
40
|
+
}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iconify-icon/react",
|
|
3
|
+
"version": "3.0.4",
|
|
3
4
|
"description": "React wrapper for Iconify Icon web component",
|
|
4
|
-
"author": "Vjacheslav Trushkin",
|
|
5
|
-
"version": "3.0.2",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"bugs": "https://github.com/iconify/iconify/issues",
|
|
8
5
|
"homepage": "https://iconify.design/",
|
|
9
|
-
"
|
|
6
|
+
"bugs": "https://github.com/iconify/iconify/issues",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"author": "Vjacheslav Trushkin",
|
|
10
9
|
"repository": {
|
|
11
10
|
"type": "git",
|
|
12
11
|
"url": "https://github.com/iconify/iconify.git",
|
|
13
12
|
"directory": "iconify-icon/react"
|
|
14
13
|
},
|
|
14
|
+
"funding": "https://github.com/sponsors/cyberalien",
|
|
15
15
|
"main": "dist/iconify.js",
|
|
16
16
|
"module": "dist/iconify.mjs",
|
|
17
17
|
"types": "dist/iconify.d.ts",
|
|
@@ -29,23 +29,26 @@
|
|
|
29
29
|
"./*": "./*"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"iconify-icon": "^3.0.
|
|
32
|
+
"iconify-icon": "^3.0.3"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@testing-library/jest-dom": "^
|
|
36
|
-
"@testing-library/react": "^16.3.
|
|
37
|
-
"@types/react": "^19.2.
|
|
35
|
+
"@testing-library/jest-dom": "^7.0.1",
|
|
36
|
+
"@testing-library/react": "^16.3.3",
|
|
37
|
+
"@types/react": "^19.2.18",
|
|
38
38
|
"@types/react-test-renderer": "^19.1.0",
|
|
39
|
-
"@vitejs/plugin-react": "^
|
|
40
|
-
"jsdom": "^
|
|
41
|
-
"react": "^19.2.
|
|
42
|
-
"rimraf": "^6.
|
|
43
|
-
"tsup": "^8.5.
|
|
39
|
+
"@vitejs/plugin-react": "^6.1.1",
|
|
40
|
+
"jsdom": "^30.0.1",
|
|
41
|
+
"react": "^19.2.8",
|
|
42
|
+
"rimraf": "^6.1.3",
|
|
43
|
+
"tsup": "^8.5.1",
|
|
44
|
+
"typescript": "5.9.3"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|
|
46
|
-
"react": ">=
|
|
47
|
+
"react": ">=18.0.0"
|
|
47
48
|
},
|
|
48
49
|
"scripts": {
|
|
50
|
+
"lint": "npx oxlint --fix src/ && tsc --noemit",
|
|
51
|
+
"fmt": "npx oxfmt src/ --write",
|
|
49
52
|
"clean": "rimraf lib dist tsconfig.tsbuildinfo",
|
|
50
53
|
"prebuild": "pnpm run clean",
|
|
51
54
|
"build": "tsup",
|
package/readme.md
CHANGED
|
@@ -46,14 +46,14 @@ If you want to use icons without Iconify API, [there are many other options avai
|
|
|
46
46
|
|
|
47
47
|
Icon name is a string. Few examples:
|
|
48
48
|
|
|
49
|
-
-
|
|
50
|
-
-
|
|
49
|
+
- `@api-provider:icon-set-prefix:icon-name`
|
|
50
|
+
- `mdi-light:home` (in this example API provider is empty, so it is skipped)
|
|
51
51
|
|
|
52
52
|
It has 3 parts, separated by ":":
|
|
53
53
|
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
54
|
+
- provider points to API source. Starts with "@", can be empty (empty value is used for public Iconify API).
|
|
55
|
+
- prefix is name of icon set.
|
|
56
|
+
- name is name of icon.
|
|
57
57
|
|
|
58
58
|
See [icon names documentation](https://iconify.design/docs/iconify-icon/icon-name.html) for more detailed explanation.
|
|
59
59
|
|
|
@@ -98,11 +98,11 @@ For more details, see [icon packages documentation](https://iconify.design/docs/
|
|
|
98
98
|
|
|
99
99
|
The icon component has the following optional properties:
|
|
100
100
|
|
|
101
|
-
-
|
|
102
|
-
-
|
|
103
|
-
-
|
|
104
|
-
-
|
|
105
|
-
-
|
|
101
|
+
- `inline`. Adds `vertical-align: -0.125em` to style to render it below text baseline, so it fits nicely in text.
|
|
102
|
+
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
|
|
103
|
+
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
|
|
104
|
+
- `flip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
|
105
|
+
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
|
|
106
106
|
|
|
107
107
|
### Other properties and events
|
|
108
108
|
|
|
@@ -114,9 +114,9 @@ By default, icon height is "1em". With is dynamic, calculated using the icon's w
|
|
|
114
114
|
|
|
115
115
|
There are several ways to change icon dimensions:
|
|
116
116
|
|
|
117
|
-
-
|
|
118
|
-
-
|
|
119
|
-
-
|
|
117
|
+
- Setting `font-size` in style (or `fontSize` if you are using inline style).
|
|
118
|
+
- Setting `width` and/or `height` property.
|
|
119
|
+
- Setting `height="none"` to remove dimensions from SVG and using CSS to resize icon.
|
|
120
120
|
|
|
121
121
|
Values for `width` and `height` can be numbers or strings.
|
|
122
122
|
|
|
@@ -170,8 +170,8 @@ Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example,
|
|
|
170
170
|
|
|
171
171
|
If you want to control icon dimensions with CSS, do the following:
|
|
172
172
|
|
|
173
|
-
-
|
|
174
|
-
-
|
|
173
|
+
- Set `height` attribute to `none` or `unset`, which will remove attribute from rendered SVG.
|
|
174
|
+
- In CSS or inline style set both `width` and `height` for iconify-icon.
|
|
175
175
|
|
|
176
176
|
```jsx
|
|
177
177
|
<Icon icon="mdi-light:home" height="none" style={{width: '40px'; height: '40px'}} />
|
|
@@ -212,15 +212,15 @@ You can rotate and flip the icon.
|
|
|
212
212
|
|
|
213
213
|
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation properties exist? Because it is a different type of transformation.
|
|
214
214
|
|
|
215
|
-
-
|
|
216
|
-
-
|
|
215
|
+
- CSS transformations transform the entire icon.
|
|
216
|
+
- Icon transformations transform the contents of the icon.
|
|
217
217
|
|
|
218
218
|
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
|
|
219
219
|
|
|
220
220
|
Rotating 16x24 icon by 90 degrees results in:
|
|
221
221
|
|
|
222
|
-
-
|
|
223
|
-
-
|
|
222
|
+
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
|
|
223
|
+
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
|
|
224
224
|
|
|
225
225
|
See [icon transformations documentation](https://iconify.design/docs/iconify-icon/transform.html) for more details.
|
|
226
226
|
|