Git Product home page Git Product logo

quinndiggity / all-the-icons.el Goto Github PK

View Code? Open in Web Editor NEW

This project forked from domtronn/all-the-icons.el

0.0 2.0 0.0 1.53 MB

A utility package to collect various Icon Fonts and propertize them within Emacs.

License: MIT License

Emacs Lisp 99.97% Clojure 0.01% CoffeeScript 0.01% CSS 0.01% HTML 0.01% Elixir 0.01% Erlang 0.01% JavaScript 0.01% OCaml 0.01% PHP 0.01% Python 0.01% Shell 0.01% TypeScript 0.01%

all-the-icons.el's Introduction

img

Installation | Usage | Fonts | Wiki

Installation

You should be able to install this package in the standard way, add it to the load path and then calling

(require 'all-the-icons)
;; or
(use-package all-the-icons)

Installing Fonts

In order for the icons to work it is very important that you install the Resource Fonts included in this package, they are available in the fonts directory. You can also install the latest fonts for this package in the (guessed?) based on the OS by calling the following function;

M-x all-the-icons-install-fonts

Bear in mind, this will also run fc-cache -f -v on MacOS and Linux which can take some time to complete. For Windows, this function will prompt for a download directory for you to install them manually.

Usage

The simplest usage for this package is to use the following functions;

  • all-the-icons-icon-for-buffer
  • all-the-icons-icon-for-file
  • all-the-icons-icon-for-mode

Which can be used to get a formatted icon which you can insert into buffers, e.g.

(insert (all-the-icons-icon-for-file "foo.js"))
    ;; Inserts a javascript icon
    ;; #("js-icon" 0 1 (display (raise -0.24) face (:family "alltheicon" :height 1.08 :foreground "#FFD446")))

Inserting Icons Directly

The above is fine if you want this package to automatically decide on the icon you want for files and things, however, to insert the icons directly you will want to use these icons functions;

  • all-the-icons-alltheicon
  • all-the-icons-faicon
  • all-the-icons-fileicon
  • all-the-icons-oction
  • all-the-icons-wicon

You can then call these functions with the icon you want to insert, e.g.

(all-the-icons-octicon "file-binary")  ;; GitHub Octicon for Binary File
(all-the-icons-faicon  "cogs")         ;; FontAwesome icon for cogs
(all-the-icons-wicon   "tornado")      ;; Weather Icon for tornado

A list of all the icon names for a font family can be found in the data directory, or by inspecting the alist variables.

The alist variables are all prefixed with

  • all-the-icons-data/

For example C-h v all-the-icons-data/ <TAB> will give a list of all the data alist you can describe (and the icon fonts they're associated with)

Inserting icons with properties

Each of the above icon functions can also be given different properties to slightly adjust the way they're formatted, these are

  • :height - The height of the icon
  • :v-adjust - Vertical adjust (positive is up, negative is down)
  • :face - The face to apply to the icon, defaults to \'default

So you would call, for example

(all-the-icons-wicon "tornado" :face 'all-the-icons-blue)

These properties can also be used on the all-the-icons-icon-for-file and all-the-icons-icon-for-mode functions as well, i.e.

(insert (all-the-icons-icon-for-file "foo.js" :height 2 :face 'all-the-icons-lred))
    ;; Inserts a RED Javascript icon with height 2
    ;; #("js-icon" 0 1 (display (raise -0.24) face (:family "alltheicon" :height 2.0 :foreground "red")))

Propertizing icons yourself

However, sometimes when propertizing these icons (for example if you were customising your mode line) you may sometimes have to know the font family to add in to override the current font family being used, e.g.

(propertize (all-the-icons-octicon "package")
            'face `(:family ,(all-the-icons-octicon-family) :height 1.2)
            'display '(raise -0.1))

Debugging/Displaying Icon Sets

Sometimes it can be useful to print out all of the icons in an icon set to ensure that

  • (a) they're the correct icon and
  • (b) what icons are available and what name they have.

There is a helper function which will print out all of the icons in an icon set and they're corresponding id/name.

(all-the-icons-insert-icons-for 'alltheicon)   ;; Prints all the icons for `alltheicon' font set

(all-the-icons-insert-icons-for 'octicon 10)   ;; Prints all the icons for the `octicon' family
                                               ;; and makes the icons height 10

(all-the-icons-insert-icons-for 'faicon 1 0.5) ;; Prints all the icons for the `faicon' family 
                                               ;; and also waits 0.5s between printing each one

Resource Fonts

All of the fonts provided in this packages as resources come with either the SIL Open Font License (OFL) or an MIT License, below I will link to each of the fonts Sources and their Licenses.

Font Name Font License
file-icons.ttf Atom File Icons Plugin MIT LICENSE
fontawesome.ttf FontAwesome Icons SIL OFL LICENSE
ocitcons.ttf GitHub OctIcons SIL OFL LICENSE
weathericons.ttf Weather Icons SIL OFL LICENSE
material-design-icons.ttf Material Icons APACHE LICENSE v2.0
all-the-icons.ttf Custom Made Font MIT LICENSE

The fonts provided with this packages are locked down to a version for unicode character mapping values. In the future, these may be automatically generated.

I would like to thank all the authors for the creation and use of these fantastic fonts.

Wiki

Lastly, there is a Wiki Page which should give you some ideas of ways to use this library to spruce up other Emacs packages.

Slow Rendering

If you experience a slow down in performace when rendering multiple icons simultaneously, you can try setting the following variable

(setq inhibit-compacting-font-caches t)

Some people have found that this fixes the problem

โ–ฒ back to top

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.