@fyicons/fyi-icon

Free Your Icons

Usage no npm install needed!

<script type="module">
  import fyiconsFyiIcon from 'https://cdn.skypack.dev/@fyicons/fyi-icon';
</script>

README

Free Your Icons

A growing set of SVG icons that can be used with a single universal web component. Lightweight, flexible, framework-agnostic, and MIT-licensed open source.

500 icons, 5 variants, 24 categories.

Search and explore icons.fyi.


Contents

Installation

The fyi-icon component is a web component built with Stencil, so it is easy to use in any modern browser environment. And it only takes a few lines of additional code to integrate with Vue, React, Angular, or any other web framework.

CDN

Add the following script tag to your page to enable the web component.

<script src="https://unpkg.com/@fyicons/fyi-icon"></script>

NPM

If you are using a build system for your project or if you just want to access the SVGs, you can install the package from NPM.

npm install @fyicons/fyi-icon

Framework Integration

Follow this short guide to quickly integrate with Vue, React, Angular, or Ember.

Usage

The fyi-icon web component is an easy and performant way to use icons in your app. The component will dynamically load an SVG for each icon. Only visible icons are loaded and icons which are not in view do not take up any additional resources from the browser.

Read the icon component properties to understand all of the options available. The following are a few common use-cases.

Basic

To get started, you only need to provide the name attribute on the fyi-icon component.

<fyi-icon name="heart"></fyi-icon>

Variant

Available variants are path, outline, solid, mono, and poly.

<fyi-icon name="arrow" variant="mono"></fyi-icon>

Rotate

Rotation can be expressed in degrees: 45, 90, 135, 180, -135, -90, -45, 0
Or using navigational headings: ne, e, se, s, sw, w, nw, n

Coming Soon: 8 additional steps of 25 degrees

<fyi-icon name="arrow-solid-curve" rotate="90"></fyi-icon>

Flip

Flips can be achieved across the "v"ertical or "y" axis and the "h"orizontal or "x" axis. The two can also be combined (like "xy", "hv").

<fyi-icon name="hand" flip="x"></fyi-icon>

Stroke-Width

This property only works when the variant is set to path, or when the variant property is excluded.

<fyi-icon name="arrow" stroke-width="1.2"></fyi-icon>

Developing

npm run dev

The source file is designed and managed in Figma.

The sync between Figma and this repository is currently being carried out with a local cli tool, which will soon be released.

Testing

There are currently several unit tests for the component itself along with its utilities.

npm run test

License

FYIcons is licensed under the MIT license.