README
XYZ Icon Set
Free, open-source set of icons!
Browse all icons at XYZ Icon Set Website.
It is recommended to use implementation packages for use with Vue and React. Alternatively check out vanilla JS usage below.
Usage
Installation with NPM
npm install xyz-icon-set
Importing icon from a package
Note: Examples are shown with ES6 syntax
You can import icons selectively by its name with suffix "Icon" (to prevent variable name collisions and misuse of keywords in cases such as return
or copy
icons).
Example of importing the paper plane icon object
import { PaperPlaneIcon } from 'xyz-icon-set';
or import as default export
import XYZIconSet from 'xyz-icon-set';
const { PaperPlaneIcon } = XYZIconSet;
Icon API Reference
Note: This reference tries to define the specs for v1. So far it is not completely done and is subject to change.
To access Icon API, you need to first get an instance of icon. The reasoning behind using classes is the usage of read-only properties passed to the constructor (such as theme
). Other properties are reactive and pass
import { PaperPlaneIcon } from 'xyz-icon-set';
const paperPlaneIcon = new PaperPlaneIcon();
Parameters
iconOptions
theme
Either
regular
orthin
.Default value:
regular
Example
new PaperPlaneIcon();
// Returns `regular` PaperPlaneIcon instance
new PaperPlaneIcon({ theme: 'thin' })
// Returns `thin` PaperPlaneIcon instance
Static Properties
.name
· Icon name in camel-case format.
PaperPlaneIcon.name === 'PaperPlaneIcon';
.category
· Semantic category of the icon. Used mostly for showcase purposes.
PaperPlaneIcon.category === 'social';
.toString(options)
Returns SVG string representation of the icon.
Parameters
options
Object describing visuals of the icon.
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
Returns
String of the icon in SVG format.
Example
const paperPlaneIcon = new PaperPlaneIcon();
paperPlaneIcon.toString({
fillOpacity: 0.25,
});
// "<svg width=\"24\" height=\"24\" view..."
(browser only) .toSVGElement(options)
Returns DOM representation of the icon. If it was called already, it'll return the same DOM object. If you wish to create a new
This method is browser only, if you try to run it without browser document
object in the global scope, it throws an error.
Parameters
options
Object describing visuals of the icon.
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
Returns
SVG DOM object of the icon.
Example
const paperPlaneIcon = new PaperPlaneIcon();
paperPlaneIcon.toSVGElement({
fillOpacity: 0.25,
});
// #document-fragment
// <svg width="24" height="24" view...
.setIconOptions(options)
Updates DOM object generated by .toSVGElement()
. This means that this method can be called only after toSVGElement
.
Parameters
options
Object describing visuals of the icon.
fillOpacity
Opacity of the transparent fill inside of the icon. Accepts values between
0
and1
. It is not recommended to use higher values than0.5
as it could break the legibility and recognizability of the icon.Default value:
0
Returns
SVG DOM object of the icon.
Example
To update the icon options
in run-time, use .setIconOptions(options)
method on (in this case) the paperPlaneIcon
like this
const paperPlaneIcon = new PaperPlaneIcon();
paperPlaneIcon.toSVGElement({
fillOpacity: 0.25,
});
paperPlaneIcon.setIconOptions({
fillOpacity: 0.5,
});
FAQ
Why is icon font not supported?
Generally text rendering is different to graphics rendering. There are many issues with icon fonts caused by the technology misuse. Eg. It could cause that the experience will be broken when certain accesibility options are on in the web browser.
Contributing
There's public Figma project which contains always the most recent changes. If you don't find the icon you were looking for, please search through issues or file a new one. There are no plans on allowing direct contributions to icon files.
License
XYZ Icon Set is licensed under the MIT License.