agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-06 07:20:40 +00:00
Code Issues Releases Activity

fix: allow iconify-icon work correctly without dimensions

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-02-20 20:01:34 +02:00
parent c04eb0dbb0
commit 0d5431deac
8 changed files with 119 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
iconify-icon/icon/README.md
View File

@ -7,10 +7,9 @@ Iconify tries to unify all icon sets. You can use the same code no matter what i
Iconify is the most versatile icon framework.
- Unified icon framework that can be used with any icon library.
- Out of the box includes 100+ icon sets with more than 100,000 icons.
- Out of the box includes 100+ icon sets with more than 150,000 icons.
- Embed icons in HTML with Iconify icon web component and components for various front-end frameworks.
- Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
- Add icon search to your applications with Iconify Icon Finder.
For more information visit [https://iconify.design/](https://iconify.design/).
@ -21,13 +20,13 @@ Iconify Icon web component renders icons.
Add this line to your page to load IconifyIcon (you can add it to `<head>` section of the page or before `</body>`):
```html
<script src="https://code.iconify.design/iconify-icon/1.0.5/iconify-icon.min.js"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.6/iconify-icon.min.js"></script>
```
or
```html
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.5/dist/iconify-icon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.6/dist/iconify-icon.min.js"></script>
```
or, if you are building a project with a bundler, you can include the script by installing `iconify-icon` as a dependency and importing it in your project:
@ -44,7 +43,7 @@ To add any icon, write something like this:
&nbsp;&nbsp;&nbsp; ![Sample](https://iconify.design/assets/images/eva-people-outline.svg)
That is it. Change `icon` attribute to the name of the icon you want to use. There are over 100,000 premade icons to choose from, including Material Symbols, Photphor, Remix Icons, Carbon, Unicons, Bootstrap Icons and even several emoji sets.
That is it. Change `icon` attribute to the name of the icon you want to use. There are over 150,000 premade icons to choose from, including Material Symbols, Photphor, Remix Icons, Carbon, Unicons, Bootstrap Icons and even several emoji sets.
Do you want to make your own icon sets? Everything you need is [available on GitHub](https://github.com/iconify): tools for creating custom icon sets, Iconify API application and documentation to help you.
@ -79,28 +78,15 @@ Web component uses the following logic to render icon:
2. Checks if icon exists. If not, it sends a request to Iconify API to retrieve icon data.
3. Renders icon in shadow DOM in web component.
### Inline mode
### Vertical alignment
Usually, icon fonts do not render like normal images, they render like text. Text is aligned slightly below the baseline.
Visual example to show the difference between inline and block modes:
Visual example to show the difference:
&nbsp;&nbsp;&nbsp; ![Inline icon](https://iconify.design/assets/images/inline.png)
To help developers, Iconify Icon has inline mode.
Why is the inline mode needed?
- To easily align icons within the text, such as emojis.
- To make the transition from outdated icon fonts to SVG easier.
You can toggle inline mode by adding `inline` attribute:
```html
<iconify-icon inline icon="material-symbols:account-circle"></iconify-icon>
```
You can also do that by applying style:
You can change that behavior by applying style:
```html
<iconify-icon
@ -109,6 +95,12 @@ You can also do that by applying style:
></iconify-icon>
```
Web component also has `inline` attribute that does the same, to make it easier for developers:
```html
<iconify-icon inline icon="material-symbols:account-circle"></iconify-icon>
```
## Render modes
Web component has several render modes, which can be changed by passing `mode` property:
@ -181,7 +173,7 @@ There are 2 types of icons: monotone and coloured.
Monotone icons use font colour, just like glyph fonts. To change colour, you can do this:
```html
<iconify-icon class="icon-bell" icon="vaadin-bell"></iconify-icon>
<iconify-icon class="icon-bell" icon="vaadin:bell"></iconify-icon>
```
and add this to CSS:
@ -204,7 +196,7 @@ Sample:
By default all icons are scaled to 1em height. To control icon height use font-size:
```html
<iconify-icon class="icon-clipboard" icon="emojione-clipboard"></iconify-icon>
<iconify-icon class="icon-clipboard" icon="emojione:clipboard"></iconify-icon>
```
and add this to css:
@ -231,13 +223,30 @@ you might also need to set line-height:
You can also set custom dimensions using `width` and `height` attributes:
```html
<iconify-icon icon="twemoji-ice-cream" width="32" height="32"></iconify-icon>
<iconify-icon icon="twemoji:ice-cream" width="32" height="32"></iconify-icon>
```
Sample:
&nbsp;&nbsp;&nbsp; ![Sample](https://iconify.design/samples/icon-size2.png)
If you want to control icon dimensions with CSS, do the following:
- Set `height` attribute to `none` or `unset`, which will remove attribute from rendered SVG.
- In CSS or inline style set both `width` and `height` for iconify-icon.
Example:
```html
<iconify-icon
icon="twemoji:ice-cream"
height="unset"
style="width: 40px; height: 40px;"
></iconify-icon>
```
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.
## Transformations
You can rotate and flip icon by adding `flip` and `rotate` attributes:
@ -270,7 +279,7 @@ Samples:
## Available icons
There are over 100,000 icons to choose from.
There are over 150,000 icons to choose from.
Few popular icon sets (monotone icons):

48
iconify-icon/icon/demo/usage.html
View File

@ -30,6 +30,39 @@
iconify-icon:hover {
color: red;
}
.unset-size {
display: flex;
gap: 8px;
background: #f0f0f0;
}
.unset-size iconify-icon {
/* display: block; */
width: 24px;
height: 24px;
animation: animate-unset 5s linear infinite;
background: #fff;
}
.unset-size:hover iconify-icon {
color: red !important;
}
@keyframes animate-unset {
0% {
width: 24px;
color: #000;
}
50% {
width: 64px;
height: 64px;
color: #800;
}
100% {
width: 24px;
height: 24px;
color: #000;
}
}
</style>
<script>
// Add icon before loading component: it will be added to IconifyPreload global
@ -284,14 +317,19 @@
mode="style"
></iconify-icon>
</p>
<h2>Bad usage</h2>
<p>
Unset size (should be empty):
<h2>Scale icon</h2>
<p>Using height="none" and CSS, animating width/height and color</p>
<div class="unset-size">
<iconify-icon
inline
icon="bi:person-lines-fill"
height="none"
mode="svg"
></iconify-icon>
</p>
<iconify-icon
icon="bi:person-lines-fill"
height="unset"
mode="style"
></iconify-icon>
</div>
</body>
</html>

4
iconify-icon/icon/package.json
View File

@ -1,8 +1,8 @@
{
"name": "iconify-icon",
"description": "Icon web component that loads icon data on demand. Over 100,000 icons to choose from",
"description": "Icon web component that loads icon data on demand. Over 150,000 icons to choose from",
"author": "Vjacheslav Trushkin <cyberalien@gmail.com> (https://iconify.design)",
"version": "1.0.5",
"version": "1.0.6",
"license": "MIT",
"main": "./dist/iconify-icon.cjs",
"types": "./dist/iconify-icon.d.ts",

4
iconify-icon/icon/src/render/span.ts
View File

@ -33,8 +33,8 @@ for (const prefix in propsToAddTo) {
/**
* Fix size: add 'px' to numbers
*/
function fixSize(value: string): string {
return value + (value.match(/^[-0-9.]+$/) ? 'px' : '');
function fixSize(value: string | undefined): string {
return value ? value + (value.match(/^[-0-9.]+$/) ? 'px' : '') : 'inherit';
}
/**

2
iconify-icon/react/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify-icon/react",
"description": "React wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin",
"version": "1.0.5",
"version": "1.0.6",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

22
iconify-icon/react/readme.md
View File

@ -34,7 +34,7 @@ Then use `Icon` component with icon name or data as "icon" parameter:
<Icon icon="mdi-light:home" />
```
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
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.
## Offline Usage
@ -104,7 +104,7 @@ For more details, see [icon packages documentation](https://docs.iconify.design/
The icon component has the following optional properties:
- `inline`. Changes icon behaviour to match icon fonts. If set to `true`, it adds vertical alignment to icon to render it below text baseline, so it fits nicely in text.
- `inline`. Adds `vertical-align: -0.125em` to style to render it below text baseline, so it fits nicely in text.
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
- `flip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
@ -122,6 +122,7 @@ There are several ways to change icon dimensions:
- Setting `font-size` in style (or `fontSize` if you are using inline style).
- Setting `width` and/or `height` property.
- Setting `height="none"` to remove dimensions from SVG and using CSS to resize icon.
Values for `width` and `height` can be numbers or strings.
@ -161,7 +162,7 @@ You can use units in width and height values:
<Icon icon="mdi-light:home" height="2em" />
```
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.
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).
#### Dimensions as 'auto'
@ -171,6 +172,19 @@ Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example,
<Icon icon="mdi-light:home" height="auto" />
```
#### Dimensions with CSS
If you want to control icon dimensions with CSS, do the following:
- Set `height` attribute to `none` or `unset`, which will remove attribute from rendered SVG.
- In CSS or inline style set both `width` and `height` for iconify-icon.
```jsx
<Icon icon="mdi-light:home" height="none" style={{width: '40px'; height: '40px'}} />
```
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.
### Icon colour
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.
© 2022 Vjacheslav Trushkin / Iconify OÜ
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of icon sets and their licenses.

42
iconify-icon/solid/README.md
View File

@ -34,7 +34,7 @@ Then use `Icon` component with icon name or data as "icon" parameter:
<Icon icon="mdi-light:home" />
```
Component will automatically retrieve data for "mdi-light:home" from Iconify API and render it. There are over 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
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.
## Offline Usage
@ -78,33 +78,13 @@ function renderHomeIcon() {
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
### Next.js notice
Example above might fail with Next.js. This is because Next.js uses outdated packaging software that does not support ES modules. But do not worry, there is a simple solution: switch to CommonJS icon packages.
To switch to CommonJS package, replace this line in example above:
```js
import home from '@iconify-icons/mdi-light/home';
```
with
```js
import home from '@iconify/icons-mdi-light/home';
```
All icons are available as ES modules for modern bundler and as CommonJS modules for outdated bundlers. ES modules use format `@iconify-icons/{prefix}`, CommonJS modules use `@iconify/icons-{prefix}`.
For more details, see [icon packages documentation](https://docs.iconify.design/sources/npm/).
## Icon component properties
`icon` property is mandatory. It tells component what icon to render. The value can be a string containing the icon name or an object containing the icon data.
The icon component has the following optional properties:
- `inline`. Changes icon behaviour to match icon fonts. If set to `true`, it adds vertical alignment to icon to render it below text baseline, so it fits nicely in text.
- `inline`. Adds `vertical-align: -0.125em` to style to render it below text baseline, so it fits nicely in text.
- `width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
- `color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
- `flip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
@ -122,6 +102,7 @@ There are several ways to change icon dimensions:
- Setting `font-size` in style (or `fontSize` if you are using inline style).
- Setting `width` and/or `height` property.
- Setting `height="none"` to remove dimensions from SVG and using CSS to resize icon.
Values for `width` and `height` can be numbers or strings.
@ -161,7 +142,7 @@ You can use units in width and height values:
<Icon icon="mdi-light:home" height="2em" />
```
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.
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).
#### Dimensions as 'auto'
@ -171,6 +152,19 @@ Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example,
<Icon icon="mdi-light:home" height="auto" />
```
#### Dimensions with CSS
If you want to control icon dimensions with CSS, do the following:
- Set `height` attribute to `none` or `unset`, which will remove attribute from rendered SVG.
- In CSS or inline style set both `width` and `height` for iconify-icon.
```jsx
<Icon icon="mdi-light:home" height="none" style={{width: '40px'; height: '40px'}} />
```
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.
### Icon colour
There are two types of icons: icons that do not have a palette and icons that do have a palette.
@ -266,4 +260,4 @@ SolidJS component is released with MIT license.
© 2022 Vjacheslav Trushkin / Iconify OÜ
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of collections and their licenses.
See [Iconify icon sets page](https://icon-sets.iconify.design/) for list of icon sets and their licenses.

2
iconify-icon/solid/package.json
View File

@ -3,7 +3,7 @@
"type": "module",
"description": "SolidJS wrapper for Iconify Icon web component",
"author": "Vjacheslav Trushkin",
"version": "1.0.5",
"version": "1.0.6",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",