SDL Icons
The goal of this repository is to manager all SDL icons.
Currently it supports two output format which is css and less.
If you would like to see another output format (eg resx, sass...) or another distributable (eg NuGet) feel free to create a pull request and we'll have a look.
This project is for everybody to contribute. We are also looking for more contributors / maintainers for this project.
Usage
less
This is the advised format
The reasons for this are:
- You can control the size of the icons. For example create you own "icons.less" file where you reference the icons you require. This will give you a much smaller file compared to using the css option which will give you all icons including the ones you don't use.
- The less compiler will warn you if a mixin does not exist. When an icon is removed for example you will get a warning from the compiler saying that the specific mixin was removed.
@import (reference) "./node_module/sdl-icons/dist/icons-graphene.less";
.my-custom-class {
.icon-sdl-white-logo();
}css
<html>
<head>
<title>SDL Icons</title>
<link rel="stylesheet" type="text/css" href="icons-graphene.css"/>
</head>
<body>
<!-- Div with an icon as background -->
<div class="icon-sdl-white-logo"></div>
</body>
</html>Installing
To install the icons in your own
npm install sdl-icons --saveBuilding
npm install
npm run-script buildReleases
Have a look at the changelog.
Contribution Guidelines
- All changes to the repo should be done as pull requests and merged to the develop branch.
- There should be no dependency to javascript on the generated ouput.
- Icons should be source controlled in the format they were delivered by UX (not minified / embedded in another file).