Iconify Updates 2020

SVG Framework version 2.0.0 Release Candidate 1 26 Aug

Multiple packages based on Iconify 2 framework have been updated:

• Iconify SVG framework: 2.0.0 release candidate 1
• Iconify for React with API: 1.0.0 release candidate 1
• New component: Iconify for Vue 3

Also, Iconify documentation has been rewritten and the most important parts of it are complete.

To learn more about the new version of the SVG framework and components, visit SVG framework 2.0 documentation and for Iconify components documentation.

New documentation is available 24 Jul

New documentation is available! Click here to visit new documentation.

Old documentation was badly outdated and almost useless. New documentation has built to be easy to edit and update.

While old documentation was focused on the SVG framework, new documentation covers all topics. New topics can be easily added. All documents are written in Markdown with a bit of custom syntax. It covers topics about various components, Iconify API, documentation for developers, tutorials on converting icons, and many other topics.

Many parts of the documentation are under construction. However, it already contains much more information than old documentation did. Documentation is updated almost daily.

New documentation is available on Iconify GitHub repository. Instructions for building documentation are available in README.md file. Anyone can contribute.

Iconify 2 updates 2 Jul

Multiple packages based on Iconify 2 framework have been updated:

• Iconify SVG framework: 2.0.0 beta 2
• Iconify for Vue: 1.0.2
• Iconify for Svelte: 1.0.0 beta 4
• Iconify for React: 2.0.0 beta 2
• Iconify for React with API: 1.0.0 beta 2

Click here to access new code.

Documentation on this website is in process of being rebuilt. For now it is for Iconify 1.0. Iconify 2.0 is not fully backwards compatible, so you should look at GitHub for documentation. If you have any questions, open an issue on Iconify GitHub repository.

Iconify for React with API

Iconify for React with API is a new package. It is similar to Iconify for React, but with added support for Iconify API.

When using Iconify for React, you must bundle used icons and pass icon data to component. New component, in addition to data syntax, supports referencing icon by name. Component will automatically retrieve icon data from Iconify API and will render it. Component caches retrieved data in local storage, so it won't need to retrieve icon data again after page reloads.

Example of a checkbox component using Iconify for React with API:

jsximport React from 'react';
import { Icon, loadIcons } from '@iconify/react-with-api';

// Optional: load both icons before starting.
// This will:
// 1. Combine icon requests into one, reducing number of HTTPS queries.
// 2. Preload icons before they are displayed, improving rendering.
loadIcons(['uil:check-circle', 'uil:circle']);

// Component
export class Checkbox extends React.Component {
   constructor(props) {
       super();
       this.state = {
           checked: props.checked,
       };
       this._check = this._check.bind(this);
   }

   render() {
       const checked = this.state.checked;
       const icon = checked ? 'uil:check-circle' : 'uil:circle';
       const className =
           'checkbox checkbox--' + (checked ? 'checked' : 'unchecked');

       return (
           <div className="checkbox-container">
               <a href="# " className={className} onClick={this._check}>
                   <Icon icon={icon} />
                   {this.props.text}
               </a>
               <small>{this.props.hint}</small>
           </div>
       );
   }

   _check(event) {
       event.preventDefault();
       this.setState({
           checked: !this.state.checked,
       });
   }
}

Iconify version 1.0.7 24 Jun

Iconify version 1.0.7 has been released.

This version includes a new bundle for the SVG framework that does not include Iconify API support.

To use the Iconify SVG framework without Iconify API support, instead of including iconify.min.js, include iconify.without-api.min.js.

Iconify SVG framework without Iconify API support works only work with icons that are bundled. That means you can use it offline, if you have added all used icons you need in a bundle.

Iconify 2.0, which is currently in development, will include a similar bundle without API support.

Iconify 2.0 beta, Vue and Svelte 30 Apr

Iconify 2.0 beta, Iconify for Vue, Iconify for Svelte.

After several months of hard work, Iconify 2.0 has reached beta stage! It is also used as base for brand new Vue and Svelte components as well as rewritten React component.

Iconify 1.0 was designed as a proof of concept. It was built to prove that there can be a decent replacement for icon fonts. However, even though it worked very well, it was not built up to modern standards. Iconify 2.0 was rebuilt from ground up, using modern technologies.

What's new in Iconify SVG Framework 2.0?

• API redundancy. The internet is not stable, downtime happens, which is the biggest issues with services that rely on third party servers. Iconify 2.0 has built in redundancy, so if API server is unreachable, Iconify attempts to retrieve icons from one of backup API servers.
• New syntax! Major differences:
  • <iconify-icon> tag is gone.
  • Only tags <span> and <i> are supported.
  • class="iconify" now defaults to block icon (without vertical-align).
  • class="iconify-icon" defaults to inline icon (former class="iconify").
  • Iconify SVG Framework watches for attribute changes, except for data-inline attribute. That means if you, for example, change data-icon attribute on a rendered icon, SVG framework will detect change and update icon.

You can still use data-inline attribute to change behavior. Same code for Iconify 1.0 and 2.0:

html<p>
   Iconify 1.0 syntax for inline icons:
   <span class="iconify" data-icon="fa-solid:home"></span>
   <i class="iconify" data-icon="mdi-account-off"></i>
</p>
<p>
   Iconify 1.0 syntax for block icons:
   <span class="iconify" data-icon="fa-solid:home" data-inline="false"></span>
   <iconify-icon data-icon="mdi-account-off"></iconify-icon>
</p>

html<p>
   Iconify 2.0 syntax for inline icons:
   <span class="iconify-inline" data-icon="fa-solid:home"></span>
   <i class="iconify-inline" data-icon="mdi-account-off"></i>
</p>
<p>
   Iconify 2.0 syntax for block icons:
   <span class="iconify" data-icon="fa-solid:home"></span>
   <i class="iconify" data-icon="mdi-account-off"></i>
</p>

What's new for developers?

• TypeScript support. Iconify was rewritten in TypeScript and exports all types, making it easy to use it with TypeScript.
• Reusable shared code. Iconify 2.0 uses a modular approach to code, allowing developers to pick what functionality they want, making it easy to build custom implementations. Vue, Svelte and new React components are proof that it works.
• SVG framework and components are now in one big monorepo, making it easy to develop and test common code.
• Simple build process using modern development tools. Build process uses TypeScript and Rollup, making it easy to create custom bundles.
• Click here to access new code.

Documentation on this website is in process of being rebuilt. For now it is for Iconify 1.0. Iconify 2.0 is not fully backwards compatible, so you should look at GitHub for documentation. If you have any questions, open an issue on Iconify GitHub repository.

Iconify version 1.0.6 21 Apr

Iconify version 1.0.6 has been released.

This version fixes bug that prevented inline style from being passed from placeholder to SVG.

Iconify version 1.0.5 31 Mar

Iconify version 1.0.5 has been released.

This version fixes issues when using Content Security Policy headers.

If you are using CSP with Iconify 1.*, you need to add the following URLs to script-src: https://code.iconify.design/ and https://api.iconify.design/.

html<meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self'; script-src https://code.iconify.design/ https://api.iconify.design/"
/>

For upcoming version 2 of the Iconify SVG framework, header will require addition of 2 more URLs: https://api.simplesvg.com and https://api.unisvg.com. The internet is not stable, errors do happen (downtime, routing errors). Iconify version 2 has built in redundancy to mitigate internet failures. If default API cannot be reached within a second, it will attempt to load icons from a backup API. Therefore, backup API needs to be added to the list of allowed script sources.

html<meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self'; script-src https://code.iconify.design/ https://api.iconify.design/ https://api.simplesvg.com/ https://api.unisvg.com/"
/>

Iconify version 1.0.4 1 Feb

Iconify version 1.0.4 has been released.

This version allows importing @iconify/iconify into TypeScript projects.