Giter Club home page Giter Club logo

elm-octicons's Introduction

Elm Octicons

This library provides octicon generation for your Elm applications. Because octicons are not all square, and some are path based vs. polygon based, the API for this library is different than other elm icon libraries like Elm Font Awesome or Elm Material Icons

Basic Usage

The below will give you a black icon in the default size for the Octicon. This is usually around 16px, but varies from one icon to the next.

import Octicons exposing (defaultOptions)

view =
    Octicons.alert defaultOptions

Usage with Options

This code will give you a white, 20px alert icon.

import Octicons exposing (color, size, icon, alertOptions)

view =
    defaultOptions |> color "white" |> size "20" |> Octicons.alert

Because the options are just functions, you can compose them and use that to style your icons. For example:

import Html exposing (Html)
import Octicons exposing (alert, arrowDown, defaultOptions)

view =
    div []
    [ homepageIcon alert
    , homepageIcon arrowDown
    ]

homepageIcon : (Octicons.Options -> Html msg) -> Html msg
homepageIcon icon =
    defaultOptions |> Octicons.color "white" |> Octicons.size "20" |> Octicons.margin "0 4px" |> icon

Naming

All of the octicons are named as they are on the octicons site but using camelCase rather than skewer-case e.g. alert, key, arrowDown

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.