agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-12 21:57:50 +00:00
Code Issues Releases Activity

Publish stable Ember component, update Ember demo, create readme file for Ember and fix minor issues in other readme files

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2021-07-20 21:03:16 +03:00
parent 91ce04031b
commit 833a39e2cc
18 changed files with 843 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
packages/ember-demo/app/components/alignment-demo.hbs Normal file
View File

@ -0,0 +1,194 @@
<section class='alignment-demo'>
<h1>Alignment (components/alignment-demo.hbs)</h1>
<div>
<p>Icon with correct width/heigh ratio:</p>
<IconifyIcon @icon='dashicons:paperclip' />
</div>
<div>
<p>Bad width/height ratio, default alignment (slice = false):</p>
<IconifyIcon @icon='dashicons:paperclip' @width='2em' @height='1em' />
<IconifyIcon @icon='dashicons:paperclip' @width='1em' @height='2em' />
</div>
<div>
<p>Slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='slice'
/>
</div>
<div>
<p>Slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='slice'
/>
</div>
<div>
<p>Left:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@hAlign='left'
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='left'
/>
</div>
<div>
<p>Left with slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@hAlign='left'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='left'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='left,slice'
/>
</div>
<div>
<p>Right:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@hAlign='right'
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='right'
/>
</div>
<div>
<p>Right with slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@hAlign='right'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='right'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='right,slice'
/>
</div>
<div>
<p>Top:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@vAlign='top'
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='top'
/>
</div>
<div>
<p>Top with slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@vAlign='top'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='top'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='top,slice'
/>
</div>
<div>
<p>Bottom:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@vAlign='bottom'
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='1em'
@height='2em'
@align='bottom'
/>
</div>
<div>
<p>Bottom with slice:</p>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@vAlign='bottom'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='bottom'
@slice={{true}}
/>
<IconifyIcon
@icon='dashicons:paperclip'
@width='2em'
@height='1em'
@align='bottom,slice'
/>
</div>
</section>

32
packages/ember-demo/app/components/color-demo.hbs Normal file
View File

@ -0,0 +1,32 @@
<section class='color-demo'>
<h1>Color and style (components/color-demo.hbs)</h1>
<div>
Icon with @color (red):
<IconifyIcon @icon='dashicons:admin-users' @color='red' @inline={{true}} />
</div>
<div>
Icon size (2em):
<IconifyIcon @icon='dashicons:admin-users' @height='2em' @inline={{true}} />
</div>
<div>
Icon style (red):
<IconifyIcon @icon='dashicons:admin-users' style='color: red;' />
</div>
<div>
Inline icon with vertical-align style (aligned to top):
<IconifyIcon
@icon='dashicons:admin-users'
style='vertical-align: .25em;'
@inline={{true}}
/>
</div>
<div>
Inline icon with variable style (purple, 2em, no alignment):
<IconifyIcon
@icon='dashicons:admin-users'
style='color: purple; vertical-align: 0; font-size: 2em;'
@inline={{true}}
@color='green'
/>
</div>
</section>

8
packages/ember-demo/app/components/icon-demo.hbs
View File

@ -1,8 +0,0 @@
<div>
Icons test:
<IconifyIcon @icon={{this.testIcon}} />
<IconifyIcon @icon={{iconData2}} />
<IconifyIcon @icon='demo' />
<IconifyIcon @icon='mdi:home' @inline={{true}} />
<IconifyIcon @icon='mdi:home' style='color: red; vertical-align: -0.125em' />
</div>

19
packages/ember-demo/app/components/icon-demo.js
View File

@ -1,19 +0,0 @@
import Component from '@glimmer/component';
import { disableCache, addIcon } from '@iconify/ember/components/iconify-icon';
disableCache('all');
const iconData = {
body: '<path d="M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z" fill="currentColor"/>',
width: 24,
height: 24,
};
addIcon('demo', iconData);
export default class IconDemoComponent extends Component {
iconData2 = iconData;
get testIcon() {
return iconData;
}
}

32
packages/ember-demo/app/components/iconify-demo.hbs Normal file
View File

@ -0,0 +1,32 @@
<div>
<section class='icon-24'>
<h1>Usage</h1>
<div>
Icon referenced by name:
<IconifyIcon @icon='mdi:home' />
</div>
<div>
Icon referenced by object:
<IconifyIcon @icon={{iconData}} />
</div>
<div class='alert'>
<IconifyIcon @icon='mdi-light:alert' />
Important notice with alert icon!
</div>
</section>
<section class='inline-demo'>
<h1>Inline demo</h1>
<div>
Block icon (behaving like image):
<IconifyIcon @icon='experiment2' />
</div>
<div>
Inline icon (behaving line text / icon font):
<IconifyIcon @icon='experiment2' @inline={{true}} />
</div>
</section>
{{! <AlignmentDemo /> }}
{{! <ColorDemo /> }}
</div>

40
packages/ember-demo/app/components/iconify-demo.js Normal file
View File

@ -0,0 +1,40 @@
import Component from '@glimmer/component';
import {
disableCache,
addIcon,
addCollection,
} from '@iconify/ember/components/iconify-icon';
import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
import playIcon from '@iconify-icons/mdi-light/play';
// Disable cache to make sure icons are loaded from API
disableCache('all');
// Add 'mdi-light:play' as 'demo'
addIcon('demo', playIcon);
addIcon('experiment2', {
width: 16,
height: 16,
body: '<g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 8.9c.1.6.2 1.1.4 1.7l.6 1.7l-.5.7H10c0 .5-.2 1-.6 1.4c-.4.4-.9.6-1.4.6c-.5 0-1.1-.2-1.4-.6c-.4-.4-.6-.9-.6-1.4H2.5l-.5-.7l.6-1.7c.2-.8.4-1.6.4-2.4V6c0-.7.1-1.4.4-2c.3-.7.7-1.2 1.2-1.7s1.1-.8 1.8-1C6.9 1.1 7.5 1 8 1c-.2.3-.4.7-.6 1.1c-.2 0-.4 0-.7.2c-.5.1-1 .4-1.4.8c-.4.3-.8.8-1 1.3c-.2.5-.3 1-.3 1.6v2.2c0 .9-.2 1.8-.4 2.7L3.2 12h9.6l-.4-1.1c-.175-.526-.274-1.13-.363-1.674L12 9c.4 0 .7 0 1-.1zM8 14c.2 0 .5-.1.7-.3c.2-.2.3-.4.3-.7H7c0 .3.1.5.3.7c.2.2.5.3.7.3zm7-10a3 3 0 1 1-6 0a3 3 0 0 1 6 0z"></path></g>',
});
// Add few mdi-light: icons
addCollection({
prefix: '',
icons: {
alert1: {
body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
},
link1: {
body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
},
},
width: 24,
height: 24,
});
export default class IconDemoComponent extends Component {
iconData = presentationPlay;
}

171
packages/ember-demo/app/styles/app.css
View File

@ -0,0 +1,171 @@
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
font-size: 16px;
line-height: 1.5;
}
/* Sections */
section {
border-bottom: 1px dotted #ccc;
padding: 16px;
}
section:last-child {
border-bottom-width: 0;
}
section:after {
content: ' ';
display: table;
clear: both;
}
h1,
h2 {
margin: 0 0 16px;
padding: 0;
font-size: 24px;
font-weight: normal;
}
h2 {
margin: 16px 0;
font-size: 20px;
}
h1 + h2 {
margin-top: -8px;
}
p {
margin: 12px 0 4px;
padding: 0;
}
/* Tests */
.test-row {
font-size: 16px;
line-height: 1.5;
}
.test-row-icons {
padding-right: 4px;
}
.test-row-icons > svg {
color: #afafaf;
display: none;
}
.test-row-icons > svg.visible {
display: inline-block;
}
.test-row-icons > svg.success {
color: #327335;
}
.test-row-icons > svg.failed {
color: #ba3329;
}
/* 24px icon */
.icon-24 svg {
font-size: 24px;
line-height: 1;
vertical-align: -0.25em;
}
/* Alert demo */
.alert {
position: relative;
margin: 8px;
padding: 16px;
padding-left: 48px;
background: #ba3329;
color: #fff;
border-radius: 5px;
float: left;
}
.alert + div {
clear: both;
}
.alert svg {
position: absolute;
left: 12px;
top: 50%;
font-size: 24px;
line-height: 1em;
margin: -0.5em 0 0;
}
/* Checkbox component */
.checkbox-container {
margin: 8px 0;
}
.checkbox {
cursor: pointer;
/* color: #1769aa; */
color: #626262;
text-decoration: none;
}
.checkbox:hover {
color: #ba3329;
text-decoration: underline;
}
.checkbox svg {
margin-right: 4px;
color: #afafaf;
font-size: 24px;
line-height: 1em;
vertical-align: -0.25em;
}
.checkbox--checked svg {
color: #327335;
}
.checkbox:hover svg {
color: inherit;
}
.checkbox-container small {
margin-left: 4px;
opacity: 0.7;
}
/* Inline demo */
.inline-demo svg {
color: #06a;
margin: 0 8px;
position: relative;
z-index: 2;
background: #fff;
}
.inline-demo div {
position: relative;
font-size: 16px;
line-height: 1.5;
}
.inline-demo div:before,
.inline-demo div:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 1px dashed #506874;
opacity: 0.5;
z-index: -1;
}
.inline-demo div:before {
bottom: 5px;
}
.inline-demo div:after {
bottom: 7px;
border-top-color: #ba3329;
}
.alignment-demo svg {
color: #06a;
font-size: 32px;
line-height: 1em;
margin-right: 8px;
box-shadow: 0 0 0 1px #ccc;
vertical-align: top;
}

2
packages/ember-demo/app/templates/application.hbs
View File

@ -1,5 +1,5 @@
{{page-title 'EmberDemo'}}
<IconDemo />
<IconifyDemo />
{{outlet}}

27
packages/ember-demo/package-lock.json generated
View File

@ -12,7 +12,8 @@
"@ember/test-helpers": "^2.2.5",
"@glimmer/component": "^1.0.4",
"@glimmer/tracking": "^1.0.4",
"@iconify/ember": "0.0.1",
"@iconify-icons/mdi-light": "^1.1.0",
"@iconify/ember": "^1.0.0-beta.1",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"ember-auto-import": "^1.11.3",
@ -3213,10 +3214,16 @@
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
"dev": true
},
"node_modules/@iconify-icons/mdi-light": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
"integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
"dev": true
},
"node_modules/@iconify/ember": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@iconify/ember/-/ember-0.0.1.tgz",
"integrity": "sha512-HyS4Y2wAaUyO3F6wAx7hzM9v640mxyGAdrkWhPZuovENhSLg2Lb982tjkg9SwUAcueust/hwhrynZV9LbqUgyQ==",
"version": "1.0.0-beta.1",
"resolved": "https://registry.npmjs.org/@iconify/ember/-/ember-1.0.0-beta.1.tgz",
"integrity": "sha512-GXuRAfJM8TobVNiN1Lq15a25Qua1tHQWPRBWBAzYYboyyRygw/iyfxTOMLibNV0Kff1oJ3XKbL995G0eyilVaw==",
"dev": true,
"dependencies": {
"@glimmer/component": "^1.0.4",
@ -25910,10 +25917,16 @@
"integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
"dev": true
},
"@iconify-icons/mdi-light": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@iconify-icons/mdi-light/-/mdi-light-1.1.0.tgz",
"integrity": "sha512-pV69tNZO9u0qZFVcy5VFmg7dL+Yq3g8DrkCIMGnW3ukgcYDZG2M2oAKeIxHUCIE/11khAsYlBdrUFglTIcbDxg==",
"dev": true
},
"@iconify/ember": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/@iconify/ember/-/ember-0.0.1.tgz",
"integrity": "sha512-HyS4Y2wAaUyO3F6wAx7hzM9v640mxyGAdrkWhPZuovENhSLg2Lb982tjkg9SwUAcueust/hwhrynZV9LbqUgyQ==",
"version": "1.0.0-beta.1",
"resolved": "https://registry.npmjs.org/@iconify/ember/-/ember-1.0.0-beta.1.tgz",
"integrity": "sha512-GXuRAfJM8TobVNiN1Lq15a25Qua1tHQWPRBWBAzYYboyyRygw/iyfxTOMLibNV0Kff1oJ3XKbL995G0eyilVaw==",
"dev": true,
"requires": {
"@glimmer/component": "^1.0.4",

3
packages/ember-demo/package.json
View File

@ -27,7 +27,8 @@
"@ember/test-helpers": "^2.2.5",
"@glimmer/component": "^1.0.4",
"@glimmer/tracking": "^1.0.4",
"@iconify/ember": "0.0.1",
"@iconify-icons/mdi-light": "^1.1.0",
"@iconify/ember": "^1.0.0-beta.1",
"babel-eslint": "^10.1.0",
"broccoli-asset-rev": "^3.0.0",
"ember-auto-import": "^1.11.3",

4
packages/ember/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@iconify/ember",
"version": "0.0.1-dev",
"version": "1.0.0-beta.1",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@iconify/ember",
"version": "0.0.1-dev",
"version": "1.0.0-beta.1",
"license": "MIT",
"dependencies": {
"@glimmer/component": "^1.0.4",

2
packages/ember/package.json
View File

@ -2,7 +2,7 @@
"name": "@iconify/ember",
"description": "Iconify icon component for Ember.",
"author": "Vjacheslav Trushkin",
"version": "0.0.1",
"version": "1.0.0-beta.1",
"license": "MIT",
"bugs": "https://github.com/iconify/iconify/issues",
"homepage": "https://iconify.design/",

327
packages/ember/readme.md
View File

@ -1,3 +1,328 @@
# Iconify for Ember
TODO
Iconify for Ember is not yet another icon component! There are many of them already.
What you get with other components:
- Limited set of icons.
- Large bundle size because all icons are bundled.
Iconify icon component is nothing like that. Component does not include any icon data, it is not tied to any specific icon set. Instead, all data is retrieved from public API on demand.
That means:
- One syntax for over 100,000 icons from 100+ icon sets.
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
For more information about Iconify project visit [https://iconify.design/](https://iconify.design/).
For extended documentation visit [Iconify for Ember documentation](https://docs.iconify.design/icon-components/ember/).
## Installation
If you are using NPM:
```bash
npm install --save-dev @iconify/ember
```
If you are using Yarn:
```bash
yarn add --dev @iconify/ember
```
## Usage with API
Install `@iconify/ember` then use `IconifyIcon` component in template with icon name or data as "icon" parameter:
```hbs
<IconifyIcon @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.
## Offline Usage
Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?
If you want to use icon component without relying on public Iconify API, there are several options:
1. You can import icon data from Iconify Icons packages.
2. You can create custom icon bundles (more efficient, but requires more coding).
3. You can host your own Iconify API instead of relying on third party service.
See [Iconify for Ember offline use documentation](https://docs.iconify.design/icon-components/ember/offline.html) or [Iconify API documentation](https://docs.iconify.design/sources/api/).
## Icon Names
Icon name is a string. Few examples:
- `@api-provider:icon-set-prefix:icon-name`
- `mdi-light:home` (in this example API provider is empty, so it is skipped)
It has 3 parts, separated by ":":
- provider points to API source. Starts with "@", can be empty (empty value is used for public Iconify API).
- prefix is name of icon set.
- name is name of icon.
See [Iconify for Vue icon names documentation](https://docs.iconify.design/icon-components/ember/icon-name.html) for more detailed explanation.
## Using icon data
Instead of icon name, you can pass icon data to component:
```hbs
<IconifyIcon @icon={{chartIcon}} @height='24' />
```
```js
// Import icon
import areaChartOutlined from '@iconify-icons/ant-design/area-chart-outlined';
// Create property for class, so icon data could be accessed in template as {{chartIcon}}
export default class IconDemoComponent extends Component {
chartIcon = areaChartOutlined;
}
```
See [icon packages documentation](https://docs.iconify.design/sources/npm/) for more details.
### Inline
Icons have 2 modes: inline and block. Difference between modes is `vertical-align` that is added to inline icons.
Inline icons are aligned slightly below baseline, so they look centred compared to text, like glyph fonts.
Block icons do not have alignment, like images, which aligns them to baseline by default.
Alignment option was added to make icons look like continuation of text, behaving like glyph fonts. This should make migration from glyph fonts easier.
To toggle between block and inline modes, you can use boolean `inline` property:
```hbs
<div>
<p>
Block:
<IconifyIcon @icon='line-md:image-twotone' />
<IconifyIcon @icon='mdi:account-box-outline' />
</p>
<p>
Inline:
<IconifyIcon @icon='line-md:image-twotone' @inline={{true}} />
<IconifyIcon @icon='mdi:account-box-outline' @inline={{true}} />
</p>
</div>
```
Visual example to show the difference between inline and block modes:
![Inline icon](https://iconify.design/assets/images/inline.png)
## Icon component properties
`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon` or `addCollection`, see instructions above) or an object containing the icon data.
Make sure you add `@` before all property names because those are component properties, not element properties.
The icon component has the following optional properties:
- `inline`. Changes icon behaviour to match icon fonts. See "Inline icon" section below.
- `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`, `hFlip`, `vFlip`. Flip icon horizontally and/or vertically. See "Transformations" section below.
- `rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
- `align`, `vAlign`, `hAlign`, `slice`. Icon alignment. See "Alignment" section below.
- `onLoad`. Callback function that is called when icon data has been loaded. See "onLoad" section below.
### Other properties and events
You can pass any other properties as element properties (without `@` before name), they will be passed to `SVG` element.
### Dimensions
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio.
There are several ways to change icon dimensions:
- Setting `font-size` in style.
- Setting `width` and/or `height` property.
Values for `width` and `height` can be numbers or strings.
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
#### Dimensions as numbers
You can use numbers for `width` and `height`.
```hbs
<IconifyIcon @icon='mdi-light:home' @height={{24}} />
```
```hbs
<IconifyIcon @icon='mdi-light:home' @width={{16}} @height={{16}} />
```
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
#### Dimensions as strings without units
If you use strings without units, they are treated the same as numbers in an example above.
```hbs
<IconifyIcon @icon='mdi-light:home' @height='24' />
```
```hbs
<IconifyIcon @icon='mdi-light:home' @width='16' @height='16' />
```
#### Dimensions as strings with units
You can use units in width and height values:
```hbs
<IconifyIcon @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.
#### Dimensions as 'auto'
Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `@height="auto"` sets height to 24 pixels.
```hbs
<IconifyIcon @icon='mdi-light:home' @height='auto' />
```
### Icon colour
There are two types of icons: icons that do not have a palette and icons that do have a palette.
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
- Add `color` property.
Examples:
Using `color` property:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' @color='red' />
<IconifyIcon @icon='eva:alert-triangle-fill' @color='#f00' />
```
Using inline style:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' style='color: red;' />
```
Using stylesheet:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' class='red-icon' />
```
```css
.red-icon {
color: red;
}
```
### Transformations
You can rotate and flip the icon.
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.
- CSS transformations transform the entire icon.
- Icon transformations transform the contents of the icon.
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.
Rotating 16x24 icon by 90 degrees results in:
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
See [icon transformations documentation](https://docs.iconify.design/icon-components/ember/transform.html) for more details.
#### Flipping an icon
There are several properties available to flip an icon:
- `hFlip`: boolean property, flips icon horizontally.
- `vFlip`: boolean property, flips icon vertically.
- `flip`: shorthand string property, can flip icon horizontally and/or vertically.
Examples:
Flip an icon horizontally:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' @hFlip={{true}} />
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='horizontal' />
```
Flip an icon vertically:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' @vFlip={{true}} />
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='vertical' />
```
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' @hFlip={{true}} @vFlip={{true}} />
<IconifyIcon @icon='eva:alert-triangle-fill' @flip='horizontal,vertical' />
```
#### Rotating an icon
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
To rotate an icon, use `rotate` property. Value can be a string (degrees or percentages) or a number.
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
Examples of 90 degrees rotation:
```hbs
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate={{1}} />
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate='90deg' />
<IconifyIcon @icon='eva:alert-triangle-fill' @rotate='25%' />
```
### onLoad
`onLoad` property is an optional callback function. It is called when icon data has been loaded.
It is not an event, such as `onClick` event for links, it is a simple callback function.
When `onLoad` is called:
- If value of icon property is an object, `onLoad` is not called.
- If value of icon property is a string and icon data is available, `onLoad` is called on first render.
- If value of icon property is a string and icon data is not available, `onLoad` is called on first re-render after icon data is retrieved from API.
What is the purpose of `onLoad`? To let you know when Icon component renders an icon and when it does not render anything. This allows you to do things like adding class name for parent element, such as "container--with-icon" that modify layout if icon is being displayed.
## Full documentation
For extended documentation visit [Iconify for Vue documentation](https://docs.iconify.design/icon-components/ember/).
## License
Vue component is released with MIT license.
© 2021 Iconify OÜ
See [Iconify icon sets page](https://iconify.design/icon-sets/) for list of collections and their licenses.

6
packages/iconify/README.md
View File

@ -3,7 +3,7 @@
Iconify is the most versatile icon framework.
- Unified icon framework that can be used with any icon library.
- Out of the box includes 90+ icon sets with more than 80,000 icons.
- Out of the box includes 100+ icon sets with more than 100,000 icons.
- Embed icons in HTML with SVG framework or components for 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.
@ -53,7 +53,7 @@ or this:
&nbsp;&nbsp;&nbsp; ![Screenshot](https://iconify.design/assets/images/inline-sample.png)
That is it. Change `data-icon` value to the name of the icon you want to use. There are over 80,000 premade icons to choose from, including FontAwesome, Material Design Icons, Tabler Icons, Box Icons, Unicons, Bootstrap Icons and even several emoji sets.
That is it. Change `data-icon` value to the name of the icon you want to use. There are over 100,000 premade icons to choose from, including FontAwesome, Material Design Icons, Tabler Icons, Box Icons, 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.
@ -280,7 +280,7 @@ Samples:
## Available icons
There are over 70,000 icons to choose from.
There are over 100,000 icons to choose from.
General collections (monotone icons):

4
packages/react/readme.md
View File

@ -11,7 +11,7 @@ Iconify icon component is nothing like that. Component does not include any icon
That means:
- One syntax for over 80,000 icons from 90+ icon sets.
- One syntax for over 100,000 icons from 100+ icon sets.
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
@ -47,7 +47,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 80,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 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
## Offline Usage

4
packages/svelte/README.md
View File

@ -11,7 +11,7 @@ Iconify icon component is nothing like that. Component does not include any icon
That means:
- One syntax for over 80,000 icons from 90+ icon sets.
- One syntax for over 100,000 icons from 100+ icon sets.
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
@ -47,7 +47,7 @@ Then use component with icon 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 80,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 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
## Offline Usage

10
packages/vue/README.md
View File

@ -11,7 +11,7 @@ Iconify icon component is nothing like that. Component does not include any icon
That means:
- One syntax for over 80,000 icons from 90+ icon sets.
- One syntax for over 100,000 icons from 100+ icon sets.
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
@ -55,7 +55,7 @@ Then use `Icon` component in template 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 80,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 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
## Offline Usage
@ -355,7 +355,11 @@ Flip an icon horizontally and vertically (the same as 180 degrees rotation):
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />
```
Why are there multiple boolean properties for flipping an icon? See "Alignment" section below for the explanation.
Why are there multiple boolean properties for flipping an icon?
In components for other frameworks, properties for flipping an icon are `hFlip` and `vFlip`. Vue has special treatment for properties that start with v-, so `vFlip` (same applies to `vAlign` attribute) attribute is not available without using tricky syntax.
Because of that, Vue component uses longer property names: `verticalFlip` instead of `vFlip` and `horizontalFlip` instead of `hFlip` for consistency.
#### Rotating an icon

12
packages/vue2/README.md
View File

@ -11,7 +11,7 @@ Iconify icon component is nothing like that. Component does not include any icon
That means:
- One syntax for over 80,000 icons from 90+ icon sets.
- One syntax for over 100,000 icons from 100+ icon sets.
- Renders SVG. Many components simply render icon fonts, which look ugly. Iconify renders pixel perfect SVG.
- Loads icons on demand. No need to bundle icons, component will automatically load icon data for icons that you use from Iconify API.
@ -41,7 +41,7 @@ If you are using Vue 3, you need to install `@iconify/vue` component. It is almo
See [Iconify for Vue 3 documentation](https://docs.iconify.design/icon-components/vue/).
## Usage with aPI
## Usage with API
Install `@iconify/vue2` and import `Icon` from it:
@ -55,7 +55,7 @@ Then use `Icon` component in template 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 80,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 100,000 icons available on Iconify API from various free and open source icon sets, including all the most popular icon sets.
## Offline Usage
@ -355,7 +355,11 @@ Flip an icon horizontally and vertically (the same as 180 degrees rotation):
<Icon icon="eva:alert-triangle-fill" flip="horizontal,vertical" />
```
Why are there multiple boolean properties for flipping an icon? See "Alignment" section below for the explanation.
Why are there multiple boolean properties for flipping an icon?
In components for other frameworks, properties for flipping an icon are `hFlip` and `vFlip`. Vue has special treatment for properties that start with v-, so `vFlip` (same applies to `vAlign` attribute) attribute is not available without using tricky syntax.
Because of that, Vue component uses longer property names: `verticalFlip` instead of `vFlip` and `horizontalFlip` instead of `hFlip` for consistency.
#### Rotating an icon