Giter VIP home page Giter VIP logo

octicons's Introduction

octicons cover light octicons cover dark

Primer Octicons

Octicons are a set of SVG icons built by GitHub for GitHub.

Libraries

This repository contains several libraries. Each of them is in the lib/ folder and gives access to Octicons on a different platform/language.

JavaScript

The octicons node.js library is the main JavaScript library. With a JavaScript API that can be used in a variety of applications.

Package Version
@primer/octicons
Node.js package with JavaScript API
npm version
@primer/octicons-react
React Octicons components
npm version
@primer/styled-octicons
React Octicons components with Styled System props
npm version

Ruby

Package Version
octicons
Ruby gem with Ruby API
Gem version
octicons_helper
Rails helper for using octicons
Gem version
jekyll-octicons
Jekyll plugin for using octicons
Gem version

Contributing

Feedback, ideas, and bug reports

If you found a bug, have feedback about our Octicon Library, or an idea on how to improve it, please open a new issue in this repo using the appropriate issue template.

Request an Icon Review (GitHub staff only)

To request an icon review for inclusion in the Octicons Library, open an issue using the icon review request template in github/primer.

Adding or updating an icon

Read through our contributing guide if you want to add or update icons.

License

(c) GitHub, Inc.

When using the GitHub logos, be sure to follow the GitHub logo guidelines.

Code License: MIT Applies to all other files

octicons's People

Contributors

actions-user avatar ashygee avatar benbalter avatar benjetson avatar bkeepers avatar broccolinisoup avatar cameron423698 avatar cameronfoxly avatar camertron avatar colebemis avatar davegandy avatar dependabot[bot] avatar edokoa avatar emilybrick avatar floedelmann avatar gavinmn avatar j-f1 avatar joelhawksley avatar jonrohan avatar joshblack avatar juliusschaeper avatar lukasoppermann avatar max avatar maximedegreve avatar mperrotti avatar primer-css avatar rezrah avatar shawnbot avatar tallys avatar yaili 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  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  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  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  avatar  avatar  avatar  avatar

octicons's Issues

Create separate icons for PR states

Currently there are single icon for "open", "closed" and "merged" states of PR.
It's not working when line with icon is "disabled" (see GitHubHQ/Project#1).
Also it may be problem with bad colour transfers (b/w device and so on).

Error installing via homebrew

I tried to follow the instructions to install via Homebrew, however ran into an error. Am I doing something incorrect or has something changed since #71 & #70 ?

doug_ bash _132x30

Relocate icons to standardized code points where possible

Most icons (in the font) reside in the Private Use Area but I have noticed that a lot of those icons could fit perfectly well into the “official” parts of Unicode. I.e. U+F02A (star icon) could be relocated to U+2605 BLACK STAR. Probably you will be surprised how many icons have actual Unicode code points.

Here's my proposed remapping list (some icons are mapped twice, this means I suggest do occupy both new codepoints) (please check the code point name; if there is some odd remapping, i.e. U+F000 (light bulb) on U+1F418 ELEPHANT, please complain because I probably made a mistake):

Old PUA, New standardized
F000, 1F4A1
F001, 1F4D1
F007, 1F46D
F00D, 2328
F011, 1F5B9
F012, 1F5BB
F013, 1F5DC
F015, 1F3F7
F016, 1F4C1
F016, 1F5BF
F018, 1F464
F02A, 2605
F02B, 1F4AC
F02D, 26A0
F02E, 1F50D
F02F, 26ED
F033, 1F680
F037, 1F465
F038, 1F4F1
F03A, 2713
F03B, 1F4E7
F03B, 1F582
F03D, 2191
F03E, 2192
F03F, 2193
F040, 2190
F041, 1F4CC
F043, 1F4CA
F044, 25C0
F045, 1F4B3
F046, 1F552
F049, 1F511
F04E, 1F441
F04F, 1F5EA
F052, 25CF
F053, 25A0
F056, 1F4F7
F057, 1F4F9
F058, 1F589
F059, 1F6C8
F05A, 25B2
F05B, 25BC
F05C, 1F517
F05D, 2B
F063, 275D
F065, 25E9
F068, 1F4C5
F069, 1F37A
F06A, 1F512
F06B, 229E
F06C, 229F
F06D, 22A1
F077, 1F56B
F07B, 1F516
F081, 274C
F084, 1F6AB
F087, 1F501
F088, 1F52D
F089, 1F52C
F08C, 1F575
F08D, 1F3E0
F091, 1F41B
F09E, 231B
F09E, 23F3
F09F, 1F839
F0A0, 1F83B
F0A1, 1F838
F0AA, 25B2
F0B6, 1F30E
F0BA, 1F50A
F0BB, 23F8
F0BC, 23EA
F0BD, 23E9
F0BE, 40
F0C4, 1F4E6
F0C5, 1F5D4
F0CA, 1F4E5
F0D0, 1F5D1
F0D2, 1F525
F0D3, 1F4BC
F0D4, 1F50C
F0D7, 1F393
F0D8, 2696
F0DA, 1F592
F0DB, 1F44E
F0DE, 1F514
F0E0, 231A
F27C, 1F5B5

Note: Icons without remapping just sta

Make octicons available on github

I ❤️ to use emojis a lot and I also like the octicons. Great job! 👍

Unfortunately, octicons can't be used in comments 😿
:point_left: should be the octicon-git-pull-request icon

It would be awesome to be able to use octicons on github itself. 😉

HTML source for Octicons site?

I'd like to create a handy copy-paste cheat sheet like the Octicons site with its helpful paste codes.

Is the generator for the Octicons website available? I'm assuming it's a Jekyll / GitHub pages joint?

Add git-patch icon

A common use case is to visual patches so having a patch icon will be a great addition.

Unable to install on MAC

I installed the icons on a mac and I just see a repeating image and not the icons themselves. I did try to update the license file but not sure if I did it correctly. Can you assist me please?

Mike

Icon "alt" text

What is the recommended way to provide an alternate piece of text in case the user's browser does not support CSS/special fonts (or for semantic value for SEO)?

Add path (and version) variables to SCSS file

The LESS file has a variable $octicons-font-path, I'm using octicons in a project using Sass. It'd be nice to be able to set the font path in the SCSS file.

I've noted this repo is generated from somewhere else, but I'll still do a PR to show what's needed.

Create Octicons as <symbol>s

For use with <use xlink:href...>, create a single file (such as octicons.svg) containing all SVGs in the svg/ directory as <symbol>s, having the filename as the ID and the viewBox set from height and width.

Poor hinting on recent Chrome

Not sure whether to put this issue on octicons or github.com itself, but on recent versions of Chrome (42.0.2311.50 beta (64-bit) presently) on Mac OSX Mavericks, I'm seeing that if the page is an odd number of pixels wide, the octicons look like they don't align well with the pixel grid horizontally:

screen shot 2015-03-20 at 4 11 15 pm

License declaration conflict

I want to deploy octicons to webjar.org. But their submission system does not recognize "license": "(OFL-1.1 AND MIT)",. Maybe you should change it to "license": ["OFL-1.1", "MIT"],.

How to use octicons with angular-material

I can use material icons by including the font-file and using <md-icon class="material-icons">face</md-icon> and it serves the material icons. Same for font-awesome.

Tried doing the same for octicons to no avail. Anything i am missing?

PS: This works fine though. <span class="octicon octicon-mark-github"></span> . But would like to use md-icon method

Add WOFF2 format

Chrome 36 will support the next generation WOFF 2.0 web font format.

File: octicons.woff2
Converted via https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a

CSS changes:

@font-face {
  font-family: 'octicons';
  src: url('octicons.eot?#iefix') format('embedded-opentype'),
       url('octicons.woff2') format('woff2'),
       url('octicons.woff') format('woff'),
       url('octicons.ttf') format('truetype'),
       url('octicons.svg#octicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

Use viewBox

I'm not sure of any reasoning behind using width and height instead of viewBox. Whatever the reason, would it be possible to use viewBox either in addition to, or in place of, the dimensions?

NPM package

I noticed that Octicons are not on NPM but the repo includes a package.json. I went ahead and published it and am more than happy to transfer it to a maintainer of the repo.

Asset linking issue with sprockets-rails

I'm currently using octicons with bower in the Rails asset pipeline with sprockets-octicons, I updated sprocket-rails to 2.3.0 and now I have the following issue

Asset was linked to from an alias rather than its exact path. Alias resolving may not be available in production.
Use "octicons/octicons/octicons.eot" instead of "octicons.eot"

I changed sprockets-octicons.scss to

@font-face {
  font-family: 'octicons';
  src: font-url('octicons/octicons/octicons.eot?#iefix') format('embedded-opentype'),
         font-url('octicons/octicons/octicons.woff') format('woff'),
         font-url('octicons/octicons/octicons.ttf') format('truetype'),
         font-url('octicons/octicons/octicons.svg#octicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

And it works again, but I don't know if that's a good final solution. I'd be happy to make a PR to help out though!

¿COPYPASTA?

Why on the official page are that text to copy code?

"COPYPASTA"

Thanks!

License?

I'm just curious how you guys are licensing the use of the icons. CC0? CC-BY-SA? Etc...

Building scripts

Hi, thanks for sharing these fonts,
I' m just wondering we are using only 2 of the icons, and it's adding too much load for the page for only two icons...
do you mind sharing the scripts you used for building the whole package. that way if it's based from on the svg files (as i guess), i can edit that file and rebuild it according to our own needs,

if that's not and option, a little bit of guidance on how I may achieve this will be appreciated
thanks

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.