@iconify-icon/react 1.0.4 → 1.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.
- package/package.json +2 -2
- package/readme.md +18 -4
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@iconify-icon/react",
|
|
3
3
|
"description": "React wrapper for Iconify Icon web component",
|
|
4
4
|
"author": "Vjacheslav Trushkin",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.6",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"bugs": "https://github.com/iconify/iconify/issues",
|
|
8
8
|
"homepage": "https://iconify.design/",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"iconify-icon": "^1.0.
|
|
32
|
+
"iconify-icon": "^1.0.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@types/react": "^18.0.26",
|
package/readme.md
CHANGED
|
@@ -34,7 +34,7 @@ Then use `Icon` component with icon name or data as "icon" parameter:
|
|
|
34
34
|
<Icon icon="mdi-light:home" />
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over
|
|
37
|
+
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 150,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
|
|
38
38
|
|
|
39
39
|
## Offline Usage
|
|
40
40
|
|
|
@@ -104,7 +104,7 @@ For more details, see [icon packages documentation](https://docs.iconify.design/
|
|
|
104
104
|
|
|
105
105
|
The icon component has the following optional properties:
|
|
106
106
|
|
|
107
|
-
- `inline`.
|
|
107
|
+
- `inline`. Adds `vertical-align: -0.125em` to style to render it below text baseline, so it fits nicely in text.
|
|
108
108
|
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
|
|
109
109
|
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
|
|
110
110
|
- `flip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
|
|
@@ -122,6 +122,7 @@ There are several ways to change icon dimensions:
|
|
|
122
122
|
|
|
123
123
|
- Setting `font-size` in style (or `fontSize` if you are using inline style).
|
|
124
124
|
- Setting `width` and/or `height` property.
|
|
125
|
+
- Setting `height="none"` to remove dimensions from SVG and using CSS to resize icon.
|
|
125
126
|
|
|
126
127
|
Values for `width` and `height` can be numbers or strings.
|
|
127
128
|
|
|
@@ -161,7 +162,7 @@ You can use units in width and height values:
|
|
|
161
162
|
<Icon icon="mdi-light:home" height="2em" />
|
|
162
163
|
```
|
|
163
164
|
|
|
164
|
-
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
|
|
165
|
+
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height. Use `height="none"` and control dimensions with CSS instead (see below).
|
|
165
166
|
|
|
166
167
|
#### Dimensions as 'auto'
|
|
167
168
|
|
|
@@ -171,6 +172,19 @@ Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example,
|
|
|
171
172
|
<Icon icon="mdi-light:home" height="auto" />
|
|
172
173
|
```
|
|
173
174
|
|
|
175
|
+
#### Dimensions with CSS
|
|
176
|
+
|
|
177
|
+
If you want to control icon dimensions with CSS, do the following:
|
|
178
|
+
|
|
179
|
+
- Set `height` attribute to `none` or `unset`, which will remove attribute from rendered SVG.
|
|
180
|
+
- In CSS or inline style set both `width` and `height` for iconify-icon.
|
|
181
|
+
|
|
182
|
+
```jsx
|
|
183
|
+
<Icon icon="mdi-light:home" height="none" style={{width: '40px'; height: '40px'}} />
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
This allows easily changing width and height separately in CSS instead of relying on font-size. In some use cases you might need to add `display: block;` to CSS.
|
|
187
|
+
|
|
174
188
|
### Icon colour
|
|
175
189
|
|
|
176
190
|
There are two types of icons: icons that do not have a palette and icons that do have a palette.
|
|
@@ -266,4 +280,4 @@ React component is released with MIT license.
|
|
|
266
280
|
|
|
267
281
|
© 2022 Vjacheslav Trushkin / Iconify OÜ
|
|
268
282
|
|
|
269
|
-
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of
|
|
283
|
+
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of icon sets and their licenses.
|