https://github.com/jasonliang-dev/heroicons-for-elm

The Heroicons SVG icon set ported over to inline elm/svg icons.
https://github.com/jasonliang-dev/heroicons-for-elm

elm heroicons svg-icons

Last synced: 28 days ago
JSON representation

The Heroicons SVG icon set ported over to inline elm/svg icons.

• Host: GitHub
• URL: https://github.com/jasonliang-dev/heroicons-for-elm
• Owner: jasonliang-dev
• License: mit
• Created: 2020-09-13T08:49:24.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-17T23:17:36.000Z (5 months ago)
• Last Synced: 2024-07-18T02:47:27.367Z (5 months ago)
• Topics: elm, heroicons, svg-icons
• Language: Elm
• Homepage: https://jasonliang.js.org/heroicons-for-elm/
• Size: 3.72 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Heroicons for Elm




  





  

    Heroicons

  

  ported over to elm/svg elements for you to use in your own Elm

  projects.



## Usage

Add `elm/svg` to your project:

```

elm install elm/svg

```

Then go to

[jasonliang.js.org/heroicons-for-elm/](https://jasonliang.js.org/heroicons-for-elm/)

and copy the code provided to you into your project:

```elm

import Html exposing (..)

import Html.Attributes exposing (class)

import Svg as S

import Svg.Attributes as SA

view : Model -> Html Msg

view model =

    div [ class "p-8" ]

        [ button [ class "border rounded shadow bg-white hover:bg-gray-100 px-4 py-2 flex items-center" ]

            [ S.svg [ SA.class "w-6 h-6 mr-2", SA.fill "none", SA.viewBox "0 0 24 24", SA.strokeWidth "1.5", SA.stroke "currentColor" ] [ S.path [ SA.strokeLinecap "round", SA.strokeLinejoin "round", SA.d "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" ] [] ]

            , span [ class "font-semibold text-gray-700 -mt-0.5" ] [ text "Verify" ]

            ]

        ]

```

Combined with [Tailwind CSS](https://tailwindcss.com/), the example above

creates a nice looking button which you can view on [Ellie](https://ellie-app.com/jyhrn3SKwTHa1).