diff --git a/iconify-icon/icon/README.md b/iconify-icon/icon/README.md index 6cadb42..5e84d6c 100644 --- a/iconify-icon/icon/README.md +++ b/iconify-icon/icon/README.md @@ -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 `` section of the page or before ``): ```html - + ``` or ```html - + ``` 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:     ![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:     ![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 - -``` - -You can also do that by applying style: +You can change that behavior by applying style: ```html ``` +Web component also has `inline` attribute that does the same, to make it easier for developers: + +```html + +``` + ## 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 - + ``` 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 - + ``` 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 - + ``` Sample:     ![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 + +``` + +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): diff --git a/iconify-icon/icon/demo/usage.html b/iconify-icon/icon/demo/usage.html index 93bb249..c67c0e9 100644 --- a/iconify-icon/icon/demo/usage.html +++ b/iconify-icon/icon/demo/usage.html @@ -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; + } + }