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.