Giter Club home page Giter Club logo

collecticons-lib's Introduction

collecticons-banner

Collecticons Library

We at Development Seed use iconography in a lot of projects. Some of the icons were designed/built on top of libraries like icoMoon by Keyamoon and others were made in house. This evergrowing collection is a set of the icons we've been using so far and are now available for free under the The MIT License and the Creative Commons Attribution License 4.0.

If you feel like contributing to this library checkout the guidelines below:

Contributing

  • The icons in this package are designed on a 16px grid and look best at sizes that are multiples of that value (E.g. 16px, 32px, 48px, etc).
  • Download the template file. You'll see a transparent 16px square (named icon-bound) being used as a wrapper. This should not be deleted and your artwork must be contained within its limits.
  • The icons should look minimalist, geometric yet functional. Use a 2px stroke for general lines and 1px for details. Round corners should be avoided if their only purpose is decoration.
  • It's of no use designing finely-detailed icons that don't work at lower resolutions. Do readability tests to ensure that your designs work at different sizes.
  • Convert strokes to fills. Unite/combine your fills.
  • Instead of using color white for making holes, subtract the foreground shape from the background shape.
  • Adding a bitmap image (PNG, JPEG, etc.) to a SVG image does not make it vector. Don't use bitmap images embedded in SVGs.

Name conventions

The name of the SVG file should follow the pattern:

[object]-[classifier]-[index]--[small-modifier].svg
  • object: Avoid using actions in the object part. Always go with real-world object names, except when there's no real-world counterpart or when the icon describes a specific/ubiquitous UI action, like share or download.
  • classifier: Additional descriptor, can be simple like open or complex like down-left.
  • index: Index for an alternative icon version.
  • small-modifier: Alternative smaller version of an existing icon.

Examples:

tick.svg
lock-open.svg
lock-open-2.svg
chevron-down--small.svg

Groups

It is possible to group icons based on specific criteria, such as if the icon represents an existing brand or if it's formally contained within a wrapper. These should be placed before the name.

[brand]-[name].svg
-- or --
[wrapper]-[name].svg
  • brand: Brand only applies when the icon represents an existing brand (E.g. Facebook, Twitter, etc).
  • wrapper: Wrapper can be circle, disc, sign, etc.

Note that brand and wrapper are mutually exclusive. There can't be a branded icon with a wrapper since brands follow the rules disciplined by their brand guides.

Examples:

brand-instagram.svg
circle-xmark.svg

Optical size

Some icons are better expressed at smaller sizes, especially when they are presented alongside text. This means that their design doesn't need to occupy the whole grid. Try to use 80% or less of the grid space instead. Example: sort.

Versions

Collecticons operates similarly to Semver with the following version convention:

  • Major: Breaking changes — removed icons, icon redesigns, name changes
  • Minor: Non-breaking changes — new icons, minor icon changes
  • Patch: Unnoticeable tweaks — slight visual changes, other updates

When the version changes the version number in the package.json file must be updated as well. Before merging to master compile the font with the collecticons processor:

yarn collecticons compile svg/ --style-formats css --style-dest dist/styles --preview-dest dist/

Once the merge is done a new release should be created using the version number in the package.json.

Add Collecticons to your project

The compiled version of Collecticons is located inside the collecticons/ folder.

You can also use your usual package manager:

NPM

  1. Install collecticons.
npm install --save collecticons-lib
  1. Link to the icons.css stylesheet in the <head> of your <html> page:
<link rel="stylesheet" href="node_modules/collecticons-lib/dist/styles/icons.css">
  1. Simply use an icon in your HTML page:
<span class="collecticon collecticon-devseed"></span>

Webfont

If you are interested in generating a custom webfont and the accompanying css/sass files from the icons we've got you covered! We created a command line util specifically for this purpose.

Check the collecticons processor repo for usage instructions.

collecticons-lib's People

Contributors

barraponto avatar danielfdsilva avatar lanesgood avatar mariano3 avatar ricardoduplos avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

collecticons-lib's Issues

Fix misspelling of hamburger

The svg file name for hamburger menu icon is misspelled as "hamburguer". There are also some misspell occurrences in the dist folder, but I'm not sure if they were derived from the file name.

Formatting for new icons

So when creating these icons and exporting through Adobe Illustrator, I noticed that the svg gets spit out centered (vertically) like so:
screen shot 2015-07-27 at 4 15 50 pm

And the original svg's are aligned with the top:
screen shot 2015-07-27 at 4 16 10 pm

I'm just wondering if this creates and issue, and if not I'll carry on bringing them in. @ricardomestre

Register in bower and npm

As a developer I want to add collecticons to my project via a package manger so that I can integrate it with my tool chain

License?

The IcoMoon license is CC-BY-SA or GPL, whereas this, I think, contains some of that content but is MIT. The extra license will probably need to be noted in the License file.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.