├── .dockerignore ├── .github ├── dependabot.yml └── workflows │ └── publish.yml ├── .gitignore ├── LICENSE ├── README.md ├── elm.json ├── example ├── .dockerignore ├── .github │ └── dependabot.yml ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── assets │ └── index.html ├── docker-bake.hcl ├── elm.json └── src │ ├── Example.elm │ └── RandomIds.elm ├── provenance.json └── src ├── FontAwesome.elm └── FontAwesome ├── Attributes.elm ├── Brands.elm ├── Brands └── Definitions.elm ├── Internal.elm ├── Layering.elm ├── Regular.elm ├── Regular └── Definitions.elm ├── Solid.elm ├── Solid └── Definitions.elm ├── Styles.elm ├── Svg.elm ├── Transforms.elm └── Transforms └── Internal.elm /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | elm-stuff/ 3 | 4 | dist/ -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: "github-actions" 5 | directory: "/" 6 | schedule: 7 | interval: "weekly" 8 | 9 | - package-ecosystem: "elm" 10 | directory: "/" 11 | schedule: 12 | interval: "weekly" 13 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | push: 5 | tags: 6 | - "*.*.*" 7 | 8 | env: 9 | GIT_TAG_NAME: ${{ github.ref_type == 'tag' && github.ref_name || '' }} 10 | 11 | jobs: 12 | publish-elm: 13 | name: Publish elm package 14 | runs-on: ubuntu-latest 15 | 16 | permissions: 17 | contents: read 18 | 19 | steps: 20 | - name: Checkout elm-fontawesome repository. 21 | uses: actions/checkout@v4 22 | with: 23 | ref: ${{ env.GIT_TAG_NAME }} 24 | 25 | - name: Set up elm. 26 | uses: jorelali/setup-elm@v5 27 | with: 28 | elm-version: 0.19.0 #0.19.1 # Older version due to bug in latest: https://github.com/elm/compiler/issues/2171 29 | 30 | - name: Publish package. 31 | run: elm publish 32 | 33 | publish-example: 34 | name: Publish example 35 | runs-on: ubuntu-latest 36 | needs: [publish-elm] 37 | 38 | permissions: 39 | contents: read 40 | 41 | steps: 42 | - name: Checkout elm-fontawesome repository. 43 | uses: actions/checkout@v4 44 | 45 | - name: Setup buildx. 46 | uses: docker/setup-buildx-action@v2 47 | 48 | - name: Build example. 49 | uses: docker/bake-action@v4 50 | with: 51 | workdir: "example" 52 | env: 53 | FONTAWESOME_SOURCE: "package" 54 | 55 | - name: Set up git to push. 56 | run: | 57 | git config --global user.name github-actions 58 | git config --global user.email github-actions@github.com 59 | 60 | - name: Checkout elm-fontawesome-example repository. 61 | uses: actions/checkout@v4 62 | with: 63 | repository: "lattyware/elm-fontawesome-example" 64 | ssh-key: ${{ secrets.EXAMPLE_DEPLOY_KEY }} 65 | path: "publish" 66 | 67 | - name: Replace elm-fontawesome-example. 68 | working-directory: ./publish 69 | run: | 70 | rm -rf $(git ls-tree --full-tree --name-only HEAD) 71 | cp -RT ../example . 72 | 73 | - name: Push to elm-fontawesome-example. 74 | working-directory: ./publish 75 | run: | 76 | if git diff --exit-code; then 77 | echo "No changes to commit." 78 | else 79 | echo "Changes to commit." 80 | git add -A 81 | git commit -m "Generated by ${{ github.repository }}" -m "Commit: ${{ env.GIT_TAG_NAME || github.sha }}" 82 | git tag -am "${GIT_TAG_NAME} Release" "${GIT_TAG_NAME}" 83 | git push 84 | git push origin "${GIT_TAG_NAME}" 85 | fi 86 | 87 | - name: Checkout elm-fontawesome-example pages repository. 88 | uses: actions/checkout@v4 89 | with: 90 | repository: "lattyware/elm-fontawesome-example" 91 | ssh-key: ${{ secrets.EXAMPLE_DEPLOY_KEY }} 92 | ref: "gh-pages" 93 | path: "pages" 94 | 95 | - name: Replace elm-fontawesome-example dist. 96 | working-directory: ./pages 97 | run: | 98 | rm -rf $(git ls-tree --full-tree --name-only HEAD) 99 | cp -RT ../example/dist . 100 | 101 | - name: Push to elm-fontawesome-example. 102 | working-directory: ./pages 103 | run: | 104 | if git diff --exit-code; then 105 | echo "No changes to commit." 106 | else 107 | git add -A 108 | git commit -m "Generated by ${{ github.repository }}" -m "Commit: ${{ env.GIT_TAG_NAME || github.sha }}" 109 | git push 110 | fi 111 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | elm-stuff/ 3 | 4 | dist/ 5 | 6 | .vscode/ 7 | .idea/ 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FontAwesome for Elm. 2 | 3 | [![Generator Build Status](https://img.shields.io/github/actions/workflow/status/lattyware/elm-fontawesome-generator/build.yml?logo=github&label=generator%20build)](https://github.com/Lattyware/elm-fontawesome-generator/actions/workflows/build.yml) 4 | [![Package Publish Status](https://img.shields.io/github/actions/workflow/status/lattyware/elm-fontawesome/publish.yml?logo=github&label=package%20publish)](https://github.com/Lattyware/elm-fontawesome/actions/workflows/publish.yml) 5 | [![Elm package](https://img.shields.io/elm-package/v/lattyware/elm-fontawesome?logo=elm)](https://package.elm-lang.org/packages/lattyware/elm-fontawesome/latest/) 6 | [![FontAwesome version](https://img.shields.io/github/package-json/dependency-version/lattyware/elm-fontawesome-generator/@fortawesome/fontawesome-svg-core?label=FontAwesome&logo=fontawesome)](https://github.com/Lattyware/elm-fontawesome-generator/blob/main/package.json) 7 | 8 | This is an Elm library for [FontAwesome][fa]. This does not rely on any 9 | external javascript (e.g: using the JavaScript library to replace nodes, which 10 | can cause issues with Elm), and unlike the font, only includes the icons you 11 | use in your Elm code if you minify your output, as well as providing access to 12 | the powerful transformation, layering, text, counter, and masking features. 13 | 14 | [fa]: https://fontawesome.com/ 15 | 16 | ## How it works. 17 | 18 | This package is generated using [the FontAwesome SVG JavaScript Core library][fa-core]. 19 | If you are interested in how this is done, would like to manually subset the 20 | icons (which shouldn't be necessary due to tree-shaking in most cases), or want 21 | to update to a new version of FontAwesome (do also feel free to submit an issue 22 | if the library is out of date) please see [the generator 23 | repo][elm-fontawesome-generator]. 24 | 25 | This does mean that this is a big package, the compiled Elm code weighs in at 26 | over 1MB. This would naturally not be ideal in most situations. The good news 27 | is that it is easy to minify out any unused icons thanks to Elm's pure nature. 28 | If you are already minifying your compiled Elm (which is good practice anyway), 29 | then you don't need to do anything more. If you are not, then [it is simple to 30 | do][minification]. This will result in perfect subsetting - you only ship the 31 | icons you use. 32 | 33 | [fa-core]: https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core 34 | [elm-fontawesome-generator]: https://github.com/Lattyware/elm-fontawesome-generator 35 | [minification]: https://guide.elm-lang.org/optimization/asset_size.html 36 | 37 | ## Using the elm library. 38 | 39 | The easiest way to use the library is to install the elm package directly: 40 | `elm install lattyware/elm-fontawesome`. 41 | 42 | Once you have done that, the best place to start is at [the 43 | `elm-fontawesome-example` project][elm-fontawesome-example] which should give 44 | you a good idea of what you can do and how to do it. For more detail on the 45 | available options, please see [the documentation][docs], which gives an 46 | exhaustive description. 47 | 48 | [elm-fontawesome-example]: https://github.com/Lattyware/elm-fontawesome-example 49 | [docs]: https://package.elm-lang.org/packages/lattyware/elm-fontawesome/latest/ 50 | 51 | ### Function names. 52 | 53 | In general, names are just the camel-cased version of the original name. E.g: `arrow-alt-circle-right` becomes `FontAwesome.Solid.arrowAltCircleRight`. Where 54 | the first character of the name isn't valid as an Elm identifier, the name is 55 | prefixed with `fa`, e.g: `500px` becomes `FontAwesome.Brands.fa500px`. Note 56 | this applies to the `FontAwesome.Attributes` module as well, so `2x` becomes 57 | `FontAwesome.Attributes.fa2x`. 58 | 59 | ### Required CSS. 60 | 61 | FontAwesome does require some CSS styles. You can either use 62 | `FontAwesome.Styles.css` to include an HTML `style` node with the necessary 63 | code directly in your page in Elm, or you can include the CSS from 64 | `@fortawesome/fontawesome-svg-core/styles.css` in your page however 65 | you choose. Do note you do _not_ need the webfont version - the icons in this 66 | package are rendered with SVG, and while that CSS will work, you will make your 67 | users load a webfont for no reason. 68 | 69 | ### Styling icons. 70 | 71 | Font Awesome supports [styling your icons][styling] in various ways. These 72 | styles are exposed as attributes for the various classes in the 73 | `FontAwesome.Attributes` module. 74 | 75 | [styling]: https://fontawesome.com/how-to-use/on-the-web/styling 76 | 77 | ## Differences in behaviour from the official library. 78 | 79 | While effort has been made to produce the same output where possible, some 80 | differences from the official library do exist: 81 | 82 | - We don't produce or consume any `data` attributes as we won't use them from 83 | Elm code anyway. 84 | - When masks are created, the official library generates random ids to avoid 85 | collisions from multiple icons on the same page. In Elm, this is impossible 86 | to do without exposing it in the API, so we don't. If you need ids you will 87 | need to manually specify them. It is possible to generate and use random ids, 88 | but that requires more effort in Elm, please see [the example][random-ids] 89 | for more. 90 | 91 | [random-ids]: https://github.com/Lattyware/elm-fontawesome-example/blob/main/src/RandomIds.elm 92 | 93 | ## Troubleshooting. 94 | 95 | ### Icons show up as giant images. 96 | 97 | This normally means you have not [included the required CSS](#required-css). 98 | 99 | ### My class isn't applied, or it is but the icon breaks. 100 | 101 | Mixing `Svg.Attribute.class` and `Html.Attribute.class` can cause the classes 102 | to get overwritten. This library uses `Svg.Attribute.class`, so if you always 103 | use this when providing attributes to the library you should not have problems. 104 | -------------------------------------------------------------------------------- /elm.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "package", 3 | "name": "lattyware/elm-fontawesome", 4 | "summary": "FontAwesome as pure Elm and SVG.", 5 | "license": "MIT", 6 | "version": "7.2.0", 7 | "exposed-modules": [ 8 | "FontAwesome", 9 | "FontAwesome.Svg", 10 | "FontAwesome.Layering", 11 | "FontAwesome.Transforms", 12 | "FontAwesome.Styles", 13 | "FontAwesome.Attributes", 14 | "FontAwesome.Solid", 15 | "FontAwesome.Solid.Definitions", 16 | "FontAwesome.Regular", 17 | "FontAwesome.Regular.Definitions", 18 | "FontAwesome.Brands", 19 | "FontAwesome.Brands.Definitions" 20 | ], 21 | "elm-version": "0.19.0 <= v < 0.20.0", 22 | "dependencies": { 23 | "elm/core": "1.0.5 <= v < 2.0.0", 24 | "elm/html": "1.0.0 <= v < 2.0.0", 25 | "elm/svg": "1.0.1 <= v < 2.0.0" 26 | }, 27 | "test-dependencies": {} 28 | } -------------------------------------------------------------------------------- /example/.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | elm-stuff/ 3 | 4 | dist/ -------------------------------------------------------------------------------- /example/.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | updates: 4 | - package-ecosystem: "elm" 5 | directory: "/" 6 | schedule: 7 | interval: "weekly" 8 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | elm-stuff/ 3 | 4 | dist/ 5 | 6 | .vscode/ 7 | .idea/ 8 | -------------------------------------------------------------------------------- /example/Dockerfile: -------------------------------------------------------------------------------- 1 | ARG ELM_VERSION=0.19.1 2 | ARG ELM_FONTAWESOME_SOURCE=context 3 | ARG ELM_FONTAWESOME_PACKAGE=lattyware/elm-fontawesome 4 | 5 | 6 | FROM alpine AS base 7 | 8 | ARG ELM_VERSION 9 | 10 | WORKDIR "/elm" 11 | 12 | RUN \ 13 | --mount=type=cache,sharing=locked,target=/etc/apk/cache \ 14 | apk add --no-cache jq moreutils 15 | 16 | ADD --link https://github.com/elm/compiler/releases/download/${ELM_VERSION}/binary-for-linux-64-bit.gz /elm/elm.gz 17 | 18 | RUN \ 19 | gunzip elm.gz && \ 20 | chmod +x elm && \ 21 | mkdir -p "/elm/${ELM_VERSION}/bin" && \ 22 | mv elm "/elm/${ELM_VERSION}/bin/elm" 23 | 24 | ENV PATH=/elm/${ELM_VERSION}/bin:${PATH} 25 | 26 | RUN [[ "$(elm --version)" == "${ELM_VERSION}" ]] && echo "Elm ${ELM_VERSION} installed." || exit 1 27 | 28 | WORKDIR "/build" 29 | 30 | COPY --link [ ".", "." ] 31 | RUN \ 32 | jq '."source-directories" -= ["lib"]' elm.json | sponge elm.json && \ 33 | jq 'del(.dependencies.direct."lattyware/elm-fontawesome")' elm.json | sponge elm.json 34 | 35 | 36 | # This is replaced with a context when this is baked. 37 | FROM scratch as fontawesome 38 | 39 | 40 | # Use a copy of fontawesome supplied by the context. 41 | FROM base as context 42 | 43 | COPY --link --from=fontawesome [ "/src/.", "lib/." ] 44 | RUN jq '."source-directories" += ["lib"]' elm.json | sponge elm.json 45 | 46 | 47 | # Uses a copy of fontawesome supplied by the elm package manager. 48 | FROM base as package 49 | 50 | ARG ELM_FONTAWESOME_PACKAGE 51 | RUN echo Y | elm install "${ELM_FONTAWESOME_PACKAGE}" 52 | 53 | 54 | # This selects from either context or package and builds. 55 | FROM ${ELM_FONTAWESOME_SOURCE} as build 56 | 57 | RUN ["elm", "make", "src/Example.elm", "--optimize", "--output=dist/example.js"] 58 | 59 | 60 | # Just keep the generated files. 61 | FROM scratch AS generated 62 | 63 | COPY --link [ "assets/.", "/." ] 64 | COPY --link --from=build ["/build/dist/.", "/."] 65 | -------------------------------------------------------------------------------- /example/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # FontAwesome for Elm Example. 2 | 3 | [![Generator Build Status](https://img.shields.io/github/actions/workflow/status/lattyware/elm-fontawesome-generator/build.yml?logo=github&label=generator%20build)](https://github.com/Lattyware/elm-fontawesome-generator/actions/workflows/build.yml) 4 | [![Package Publish Status](https://img.shields.io/github/actions/workflow/status/lattyware/elm-fontawesome/publish.yml?logo=github&label=package%20publish)](https://github.com/Lattyware/elm-fontawesome/actions/workflows/publish.yml) 5 | [![Elm package](https://img.shields.io/elm-package/v/lattyware/elm-fontawesome?logo=elm)](https://package.elm-lang.org/packages/lattyware/elm-fontawesome/latest/) 6 | [![FontAwesome version](https://img.shields.io/github/package-json/dependency-version/lattyware/elm-fontawesome-generator/@fortawesome/fontawesome-svg-core?label=FontAwesome&logo=fontawesome)](https://github.com/Lattyware/elm-fontawesome-generator/blob/main/package.json) 7 | 8 | This repo contains an example of using [the `elm-fontawesome` 9 | library][elm-fontawesome]. 10 | 11 | [elm-fontawesome]: https://github.com/Lattyware/elm-fontawesome 12 | 13 | You probably just want to take a look at `src/Example.elm` it is a simple 14 | static elm page, so you can see [a live version of it here][live]. 15 | 16 | [live]: https://lattyware.github.io/elm-fontawesome-example/ 17 | -------------------------------------------------------------------------------- /example/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | elm-fontawesome-example 6 | 7 | 8 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/docker-bake.hcl: -------------------------------------------------------------------------------- 1 | # The path to find the library at. 2 | variable "FONTAWESOME_CONTEXT" { 3 | default = ".." 4 | } 5 | 6 | # The elm package for the library. 7 | variable "FONTAWESOME_PACKAGE" { 8 | default = "lattyware/elm-fontawesome" 9 | } 10 | 11 | # If "context" then we will look at the path FONTAWESOME_CONTEXT to find the 12 | # library, and copy it in as a "lib" directory. 13 | # If "package" then we will install the package FONTAWESOME_PACKAGE with the 14 | # elm package manager. 15 | variable "FONTAWESOME_SOURCE" { 16 | default = "context" 17 | } 18 | 19 | target "build" { 20 | output = ["type=local,dest=dist"] 21 | pull = true 22 | args = { 23 | ELM_FONTAWESOME_PACKAGE = "${FONTAWESOME_PACKAGE}" 24 | ELM_FONTAWESOME_SOURCE = "${FONTAWESOME_SOURCE}" 25 | } 26 | contexts = { 27 | fontawesome = "${FONTAWESOME_CONTEXT}" 28 | } 29 | } 30 | 31 | group "default" { 32 | targets = [ "build" ] 33 | } 34 | -------------------------------------------------------------------------------- /example/elm.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "application", 3 | "source-directories": ["src"], 4 | "elm-version": "0.19.1", 5 | "dependencies": { 6 | "direct": { 7 | "elm/browser": "1.0.2", 8 | "elm/core": "1.0.5", 9 | "elm/html": "1.0.0", 10 | "elm/random": "1.0.0", 11 | "elm/svg": "1.0.1", 12 | "elm/time": "1.0.0" 13 | }, 14 | "indirect": { 15 | "elm/json": "1.1.3", 16 | "elm/url": "1.0.0", 17 | "elm/virtual-dom": "1.0.3" 18 | } 19 | }, 20 | "test-dependencies": { 21 | "direct": {}, 22 | "indirect": {} 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /example/src/Example.elm: -------------------------------------------------------------------------------- 1 | module Example exposing (main) 2 | 3 | import Browser 4 | import FontAwesome as Icon exposing (Icon) 5 | import FontAwesome.Attributes as Icon 6 | import FontAwesome.Brands as Icon 7 | import FontAwesome.Layering as Icon 8 | import FontAwesome.Solid as Icon 9 | import FontAwesome.Styles as Icon 10 | import FontAwesome.Svg as SvgIcon 11 | import FontAwesome.Transforms as IconT 12 | import Html exposing (Html) 13 | import Html.Attributes as HtmlA 14 | import Random 15 | import RandomIds 16 | import Svg 17 | import Svg.Attributes as SvgA 18 | import Time 19 | 20 | 21 | 22 | -- Simple Examples 23 | 24 | 25 | simpleExamples = 26 | -- Some simple examples of rendering icons. 27 | exampleSection "Simple Examples" 28 | -- A simple icon can be rendered with Icon.view. 29 | [ Html.div [] 30 | [ Icon.view Icon.arrowAltCircleRight 31 | , Html.text " Go!" 32 | ] 33 | 34 | -- We can apply FontAwesome styles to the icons. 35 | , Html.div [] 36 | [ Icon.spinner |> Icon.styled [ Icon.spin ] |> Icon.view 37 | , Html.text " Loading..." 38 | ] 39 | 40 | -- Including stacking, although take a look further down for layering—it can do the same thing and a lot more! 41 | , Html.div [ Icon.stack, Icon.fa2x ] 42 | [ Icon.camera |> Icon.styled [ Icon.stack1x ] |> Icon.view 43 | , Icon.ban |> Icon.styled [ Icon.stack2x, HtmlA.style "color" "Tomato" ] |> Icon.view 44 | ] 45 | ] 46 | 47 | 48 | 49 | -- Sizing Icons 50 | 51 | 52 | sizes = 53 | [ Icon.xs, Icon.sm, Icon.lg, Icon.fa2x, Icon.fa3x, Icon.fa5x, Icon.fa7x, Icon.fa10x ] 54 | 55 | 56 | stroopwafel size = 57 | Icon.stroopwafel |> Icon.styled [ size ] |> Icon.view 58 | 59 | 60 | sizingIcons = 61 | exampleSection "Sizing Icons" (sizes |> List.map stroopwafel) 62 | 63 | 64 | 65 | -- Fixed Width Icons 66 | 67 | 68 | menuItems = 69 | [ ( Icon.home, "Home" ) 70 | , ( Icon.info, "Info" ) 71 | , ( Icon.book, "Library" ) 72 | , ( Icon.pencilAlt, "Applications" ) 73 | , ( Icon.cog, "Settings" ) 74 | ] 75 | 76 | 77 | menuItem ( icon, text ) = 78 | Html.div [] 79 | [ icon |> Icon.styled [ Icon.fw, HtmlA.style "background" "MistyRose" ] |> Icon.view 80 | , Html.text " " 81 | , Html.text text 82 | ] 83 | 84 | 85 | fixedWidthIcons = 86 | exampleSection "Fixed Width Icons" 87 | [ Html.div [ HtmlA.style "font-size" "2rem" ] (menuItems |> List.map menuItem) ] 88 | 89 | 90 | 91 | -- Icons in a List. 92 | 93 | 94 | listItems = 95 | [ ( Icon.checkSquare |> Icon.view, "List icons can" ) 96 | , ( Icon.checkSquare |> Icon.view, "be used to" ) 97 | , ( Icon.spinner |> Icon.styled [ Icon.spinPulse ] |> Icon.view, "replace bullets" ) 98 | , ( Icon.square |> Icon.view, "in lists" ) 99 | ] 100 | 101 | 102 | listItem ( icon, text ) = 103 | Html.li [] [ Html.span [ Icon.li ] [ icon ], Html.text text ] 104 | 105 | 106 | iconsInAList = 107 | exampleSection "Icons in a List" [ Html.ul [ Icon.ul ] (listItems |> List.map listItem) ] 108 | 109 | 110 | 111 | -- Animating Icons 112 | 113 | 114 | spinners = 115 | [ Icon.spinner, Icon.circleNotch, Icon.sync, Icon.cog, Icon.stroopwafel ] 116 | 117 | 118 | animatingIcons = 119 | exampleSection "Animating Icons" 120 | [ Html.div [ Icon.fa3x ] 121 | [ Icon.spinner |> Icon.styled [ Icon.spinPulse ] |> Icon.view 122 | , Html.span [] (spinners |> List.map (Icon.styled [ Icon.spin ] >> Icon.view)) 123 | ] 124 | ] 125 | 126 | 127 | 128 | -- Layering, Text and Counters 129 | 130 | 131 | layeringTextAndCounters = 132 | exampleSection "Layering, Text, and Counters" 133 | [ Html.div [ Icon.fa4x ] 134 | [ Icon.layers [ HtmlA.style "background" "MistyRose" ] 135 | [ Icon.circle |> Icon.view 136 | , Icon.times |> Icon.styled [ Icon.inverse ] |> Icon.transform [ IconT.shrink 6 ] |> Icon.view 137 | ] 138 | , Icon.layers [ HtmlA.style "background" "MistyRose" ] 139 | [ Icon.bookmark |> Icon.view 140 | , Icon.heart 141 | |> Icon.styled [ Icon.inverse, HtmlA.style "color" "Tomato" ] 142 | |> Icon.transform [ IconT.shrink 10, IconT.up 2 ] 143 | |> Icon.view 144 | ] 145 | , Icon.layers [ HtmlA.style "background" "MistyRose" ] 146 | [ Icon.play |> Icon.transform [ IconT.rotate -90, IconT.grow 2 ] |> Icon.view 147 | , Icon.sun 148 | |> Icon.styled [ Icon.inverse ] 149 | |> Icon.transform [ IconT.shrink 10, IconT.up 2 ] 150 | |> Icon.view 151 | , Icon.moon 152 | |> Icon.styled [ Icon.inverse ] 153 | |> Icon.transform [ IconT.shrink 11, IconT.down 4.2, IconT.left 4 ] 154 | |> Icon.view 155 | , Icon.star 156 | |> Icon.styled [ Icon.inverse ] 157 | |> Icon.transform [ IconT.shrink 11, IconT.down 4.2, IconT.right 4 ] 158 | |> Icon.view 159 | ] 160 | , Icon.layers [ HtmlA.style "background" "MistyRose" ] 161 | [ Icon.calendar |> Icon.view 162 | , Icon.textTransformed [ Icon.inverse, HtmlA.style "font-weight" "900" ] [ IconT.shrink 8, IconT.down 3 ] "27" 163 | ] 164 | , Icon.layers [ HtmlA.style "background" "MistyRose" ] 165 | [ Icon.certificate |> Icon.view 166 | , Icon.textTransformed [ Icon.inverse, HtmlA.style "font-weight" "900" ] [ IconT.shrink 11.5, IconT.rotate -30 ] "NEW" 167 | ] 168 | , Icon.layers [ HtmlA.style "background" "MistyRose" ] 169 | [ Icon.envelope |> Icon.view 170 | , Icon.counter [ HtmlA.style "background" "Tomato" ] "1,419" 171 | ] 172 | ] 173 | ] 174 | 175 | 176 | 177 | -- Masking 178 | 179 | 180 | masking = 181 | exampleSection "Masking" 182 | [ Html.div [ Icon.fa4x, HtmlA.style "background" "MistyRose" ] 183 | [ Icon.pencilAlt 184 | |> Icon.transform [ IconT.shrink 10, IconT.up 0.5 ] 185 | |> Icon.masked (Icon.comment |> Icon.withId "comment") 186 | |> Icon.view 187 | , Icon.facebookF 188 | |> Icon.transform [ IconT.shrink 3.5, IconT.down 1.6, IconT.right 1.25 ] 189 | |> Icon.masked (Icon.circle |> Icon.withId "facebook") 190 | |> Icon.view 191 | , Icon.headphones 192 | |> Icon.transform [ IconT.shrink 6 ] 193 | |> Icon.masked (Icon.square |> Icon.withId "headphones") 194 | |> Icon.view 195 | , Icon.mask 196 | |> Icon.transform [ IconT.shrink 3, IconT.up 1 ] 197 | |> Icon.masked (Icon.circle |> Icon.withId "mask") 198 | |> Icon.view 199 | ] 200 | ] 201 | 202 | 203 | 204 | -- Random Ids 205 | 206 | 207 | randomIdAndIcon = 208 | Random.map2 (\id -> \icon -> ( id, icon )) 209 | RandomIds.randomId 210 | (Random.uniform Icon.car [ Icon.bullhorn, Icon.thumbsUp, Icon.signOutAlt, Icon.clock, Icon.questionCircle, Icon.chessBishop ]) 211 | 212 | 213 | randomise = 214 | Random.generate Change (Random.list 10 randomIdAndIcon) 215 | 216 | 217 | randomIconWithId ( id, icon ) = 218 | icon 219 | |> Icon.withId id 220 | |> Icon.titled id 221 | |> Icon.styled [ Icon.fw ] 222 | |> Icon.view 223 | 224 | 225 | randomIds randomIcons = 226 | exampleSection "Random Ids" (randomIcons |> List.map randomIconWithId) 227 | 228 | 229 | 230 | -- SVG 231 | 232 | 233 | svgIcons = 234 | exampleSection "Icons in an existing SVG element." 235 | [ Svg.svg [ SvgA.viewBox "0 0 512 512", SvgA.style "width: 150px; height: 150px;" ] 236 | [ SvgIcon.view Icon.pencilAlt ] 237 | ] 238 | 239 | 240 | type alias Model = 241 | List ( String, Icon Icon.WithoutId ) 242 | 243 | 244 | type Msg 245 | = Randomise 246 | | Change Model 247 | 248 | 249 | main : Program () Model Msg 250 | main = 251 | Browser.document 252 | { init = always ( [], randomise ) 253 | , update = update 254 | , view = view 255 | , subscriptions = subscriptions 256 | } 257 | 258 | 259 | update : Msg -> Model -> ( Model, Cmd Msg ) 260 | update msg model = 261 | case msg of 262 | Randomise -> 263 | ( model, randomise ) 264 | 265 | Change newModel -> 266 | ( newModel, Cmd.none ) 267 | 268 | 269 | subscriptions : Model -> Sub Msg 270 | subscriptions _ = 271 | Time.every 2000 (always Randomise) 272 | 273 | 274 | view : Model -> Browser.Document Msg 275 | view model = 276 | { title = "elm-fontawesome Example" 277 | , body = 278 | [ Html.div [] 279 | -- First we include the CSS for FontAwesome, so the icons render correctly. 280 | [ Icon.css 281 | , Html.h1 [] [ Html.a [ HtmlA.href "https://github.com/Lattyware/elm-fontawesome" ] [ Html.text "elm-fontawesome" ] ] 282 | , simpleExamples 283 | , sizingIcons 284 | , fixedWidthIcons 285 | , iconsInAList 286 | , animatingIcons 287 | , layeringTextAndCounters 288 | , masking 289 | , randomIds model 290 | , svgIcons 291 | ] 292 | ] 293 | } 294 | 295 | 296 | exampleSection name examples = 297 | Html.div [] (Html.h2 [] [ Html.text name ] :: examples) 298 | -------------------------------------------------------------------------------- /example/src/RandomIds.elm: -------------------------------------------------------------------------------- 1 | module RandomIds exposing (randomId) 2 | 3 | import Random 4 | 5 | 6 | {-| This is a generator for a random id usable by the library. 7 | 8 | See the documentation in [the `elm/random` library](https://package.elm-lang.org/packages/elm/random/latest/) for more 9 | on how to use a generator to get values. 10 | 11 | Most of the time, it is easier in Elm to just get a suitable id from your model, but if you don't have a good source for 12 | an id, this gives you a solution. 13 | 14 | -} 15 | randomId : Random.Generator String 16 | randomId = 17 | let 18 | randomIdChar = 19 | Random.uniform '0' ("123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" |> String.toList) 20 | in 21 | Random.map String.fromList (Random.list 12 randomIdChar) 22 | -------------------------------------------------------------------------------- /provenance.json: -------------------------------------------------------------------------------- 1 | { 2 | "_type": "https://in-toto.io/Statement/v0.1", 3 | "predicateType": "https://slsa.dev/provenance/v0.2", 4 | "subject": [ 5 | { 6 | "name": ".dockerignore", 7 | "digest": { 8 | "sha256": "211bfafcc3874202408e9a48f40b4606326a57fd2fbf780bb7866c21d11daee1" 9 | } 10 | }, 11 | { 12 | "name": ".github/dependabot.yml", 13 | "digest": { 14 | "sha256": "891781a2d8b340d9d51fab6113b920406b3cf9d6ee99099de8ddc48e321231ce" 15 | } 16 | }, 17 | { 18 | "name": ".github/workflows/publish.yml", 19 | "digest": { 20 | "sha256": "f0433c94253aeef942b45126b91313c37591591888401696509824a0ef676ceb" 21 | } 22 | }, 23 | { 24 | "name": ".gitignore", 25 | "digest": { 26 | "sha256": "497df785ff496df4c9cec6453cdb10693ca30f75232f04764ea982a9d14af5e3" 27 | } 28 | }, 29 | { 30 | "name": "LICENSE", 31 | "digest": { 32 | "sha256": "95b9a0230331be3f9d80610ac8f27c27a1c41aa87c04d76984b7e69aad9ca71b" 33 | } 34 | }, 35 | { 36 | "name": "README.md", 37 | "digest": { 38 | "sha256": "4dcf2388af3c82811486f84f4ecdceefcba251d886a18bf81143e3522310bcdc" 39 | } 40 | }, 41 | { 42 | "name": "elm.json", 43 | "digest": { 44 | "sha256": "d8a18d23f4eb401b0566f1485efd4cd48e4d94a26985c4539904be9f32756781" 45 | } 46 | }, 47 | { 48 | "name": "example/.dockerignore", 49 | "digest": { 50 | "sha256": "211bfafcc3874202408e9a48f40b4606326a57fd2fbf780bb7866c21d11daee1" 51 | } 52 | }, 53 | { 54 | "name": "example/.github/dependabot.yml", 55 | "digest": { 56 | "sha256": "5ab6d8f95665fdf85da2bd89f159cfa8224df6d0db5ab43ebbdd731fc885fa20" 57 | } 58 | }, 59 | { 60 | "name": "example/.gitignore", 61 | "digest": { 62 | "sha256": "497df785ff496df4c9cec6453cdb10693ca30f75232f04764ea982a9d14af5e3" 63 | } 64 | }, 65 | { 66 | "name": "example/Dockerfile", 67 | "digest": { 68 | "sha256": "7e8398532d83618a461be00b9fff7a5061bf3e7f7bff6ff1b9d8ab2d8416d64d" 69 | } 70 | }, 71 | { 72 | "name": "example/LICENSE", 73 | "digest": { 74 | "sha256": "95b9a0230331be3f9d80610ac8f27c27a1c41aa87c04d76984b7e69aad9ca71b" 75 | } 76 | }, 77 | { 78 | "name": "example/README.md", 79 | "digest": { 80 | "sha256": "10281f3a0b768f64bb056e9bf965d996deb3fff8c4df2b3a254fe80b2b01e649" 81 | } 82 | }, 83 | { 84 | "name": "example/assets/index.html", 85 | "digest": { 86 | "sha256": "f78033be7b22fab14bbf5f5b1e8376333b8dbafdc79ed4f947c3d3823bd95851" 87 | } 88 | }, 89 | { 90 | "name": "example/docker-bake.hcl", 91 | "digest": { 92 | "sha256": "52e0e85d00c769a0edd95942c7804a1d28f6fe5a8aa89b10b742eafe29fed7c9" 93 | } 94 | }, 95 | { 96 | "name": "example/elm.json", 97 | "digest": { 98 | "sha256": "f9ae62b3f16d9920253c0eab6aabd2805ce1c1b1aab293a7c4f6496129f33434" 99 | } 100 | }, 101 | { 102 | "name": "example/src/Example.elm", 103 | "digest": { 104 | "sha256": "ef1d3fc6e8f6593642b2469ffe4db7b044c45b31ebb559b216970ecf38219fee" 105 | } 106 | }, 107 | { 108 | "name": "example/src/RandomIds.elm", 109 | "digest": { 110 | "sha256": "40aa5947c1702b4c237d7567134c7cb8d707e20c75e720480c767ca0b31ab7ec" 111 | } 112 | }, 113 | { 114 | "name": "src/FontAwesome/Attributes.elm", 115 | "digest": { 116 | "sha256": "91f44cde164f2b54009c749fb770d8792b43995fa76b00f2ec297225ced715da" 117 | } 118 | }, 119 | { 120 | "name": "src/FontAwesome/Brands/Definitions.elm", 121 | "digest": { 122 | "sha256": "16fa8a56011f5d7d7d91b47871b244aba86a78524b2009390f66212055ff7bee" 123 | } 124 | }, 125 | { 126 | "name": "src/FontAwesome/Brands.elm", 127 | "digest": { 128 | "sha256": "fb8a3ff7dfea6ad1ecb29a7234fa4f314b6578af666b0716d02499ddf88b9089" 129 | } 130 | }, 131 | { 132 | "name": "src/FontAwesome/Internal.elm", 133 | "digest": { 134 | "sha256": "4eb34696883a123a4fa7bbba4ea1d8c10c712e4948f213f234d07a350341d265" 135 | } 136 | }, 137 | { 138 | "name": "src/FontAwesome/Layering.elm", 139 | "digest": { 140 | "sha256": "a916c2c7636fc3a4ec7bee1a3648d0750238184d2eb67bc53f6857180c8b6148" 141 | } 142 | }, 143 | { 144 | "name": "src/FontAwesome/Regular/Definitions.elm", 145 | "digest": { 146 | "sha256": "c31a57daca46781343a73eb42f496fb0870d2669383f287e5a949b5e3f9afcfd" 147 | } 148 | }, 149 | { 150 | "name": "src/FontAwesome/Regular.elm", 151 | "digest": { 152 | "sha256": "8dcc9c42c9f8bb16177980ced413779b8acd972e8fe6f3a7ba6d1137ece6c151" 153 | } 154 | }, 155 | { 156 | "name": "src/FontAwesome/Solid/Definitions.elm", 157 | "digest": { 158 | "sha256": "6e4402ec97435a0f3dc9828dd050639f8b72af736526c1c560f91ab873f4fba6" 159 | } 160 | }, 161 | { 162 | "name": "src/FontAwesome/Solid.elm", 163 | "digest": { 164 | "sha256": "151722bf7fcab65a9ff7c69c61a7af720d17c9bc454eadaacd478e39172a0b34" 165 | } 166 | }, 167 | { 168 | "name": "src/FontAwesome/Styles.elm", 169 | "digest": { 170 | "sha256": "6404cc042a1b0e1f48a2686bae891cb61e8b5cfec0071266a11d32c24f21b33d" 171 | } 172 | }, 173 | { 174 | "name": "src/FontAwesome/Svg.elm", 175 | "digest": { 176 | "sha256": "8efb5ff0b1c067d55b659c5f03912f423e395a18ac3525fa4d70f5cf6a4592c0" 177 | } 178 | }, 179 | { 180 | "name": "src/FontAwesome/Transforms/Internal.elm", 181 | "digest": { 182 | "sha256": "f845ce7965216ec6b4f1b159e62c85c698fa45c04e645a5107526db93af80478" 183 | } 184 | }, 185 | { 186 | "name": "src/FontAwesome/Transforms.elm", 187 | "digest": { 188 | "sha256": "3e65d0a40707416315fd975b298fc742d978c862f1dbfd033e17ec370a20c813" 189 | } 190 | }, 191 | { 192 | "name": "src/FontAwesome.elm", 193 | "digest": { 194 | "sha256": "8cacb5e71c5b503e90ed81584b6718a4a6cd1015c2a1230f7873999118c59945" 195 | } 196 | } 197 | ], 198 | "predicate": { 199 | "builder": { 200 | "id": "https://github.com/Lattyware/elm-fontawesome-generator/actions/runs/11923311971" 201 | }, 202 | "buildType": "https://mobyproject.org/buildkit@v1", 203 | "materials": [ 204 | { 205 | "uri": "pkg:docker/node@23-alpine?platform=linux%2Famd64", 206 | "digest": { 207 | "sha256": "ecefaffd4706c5879af52e022fdb8ea30cbd6590e2a30d05347790d690727c6c" 208 | } 209 | } 210 | ], 211 | "invocation": { 212 | "configSource": { 213 | "entryPoint": "Dockerfile" 214 | }, 215 | "parameters": { 216 | "frontend": "dockerfile.v0", 217 | "args": { 218 | "build-arg:ELM_FONTAWESOME_VERSION": "7.2.0" 219 | }, 220 | "locals": [ 221 | { 222 | "name": "context" 223 | }, 224 | { 225 | "name": "dockerfile" 226 | } 227 | ] 228 | }, 229 | "environment": { 230 | "platform": "linux/amd64" 231 | } 232 | }, 233 | "buildConfig": { 234 | "llbDefinition": [ 235 | { 236 | "id": "step0", 237 | "op": { 238 | "Op": { 239 | "Source": { 240 | "identifier": "docker-image://docker.io/library/node:23-alpine@sha256:ecefaffd4706c5879af52e022fdb8ea30cbd6590e2a30d05347790d690727c6c", 241 | "attrs": { 242 | "image.resolvemode": "pull" 243 | } 244 | } 245 | }, 246 | "platform": { 247 | "Architecture": "amd64", 248 | "OS": "linux" 249 | }, 250 | "constraints": {} 251 | } 252 | }, 253 | { 254 | "id": "step1", 255 | "op": { 256 | "Op": { 257 | "File": { 258 | "actions": [ 259 | { 260 | "secondaryInput": -1, 261 | "Action": { 262 | "Mkdir": { 263 | "path": "/fa", 264 | "mode": 493, 265 | "makeParents": true, 266 | "timestamp": -1 267 | } 268 | } 269 | } 270 | ] 271 | } 272 | }, 273 | "constraints": {} 274 | }, 275 | "inputs": [ 276 | "step0:0" 277 | ] 278 | }, 279 | { 280 | "id": "step2", 281 | "op": { 282 | "Op": { 283 | "Source": { 284 | "identifier": "local://context", 285 | "attrs": { 286 | "local.excludepatterns": "[\"node_modules\",\"elm-stuff\",\"dist\"]", 287 | "local.followpaths": "[\"base\",\"config.json\",\"elm-tooling.json\",\"package-lock.json\",\"package.json\",\"src\",\"tsconfig.json\"]", 288 | "local.sharedkeyhint": "context" 289 | } 290 | } 291 | }, 292 | "constraints": {} 293 | } 294 | }, 295 | { 296 | "id": "step3", 297 | "op": { 298 | "Op": { 299 | "File": { 300 | "actions": [ 301 | { 302 | "input": -1, 303 | "output": -1, 304 | "Action": { 305 | "Copy": { 306 | "src": "/package.json", 307 | "dest": "/fa/", 308 | "mode": -1, 309 | "followSymlink": true, 310 | "dirCopyContents": true, 311 | "createDestPath": true, 312 | "allowWildcard": true, 313 | "allowEmptyWildcard": true, 314 | "timestamp": -1 315 | } 316 | } 317 | }, 318 | { 319 | "input": 1, 320 | "output": -1, 321 | "Action": { 322 | "Copy": { 323 | "src": "/package-lock.json", 324 | "dest": "/fa/", 325 | "mode": -1, 326 | "followSymlink": true, 327 | "dirCopyContents": true, 328 | "createDestPath": true, 329 | "allowWildcard": true, 330 | "allowEmptyWildcard": true, 331 | "timestamp": -1 332 | } 333 | } 334 | }, 335 | { 336 | "input": 2, 337 | "Action": { 338 | "Copy": { 339 | "src": "/elm-tooling.json", 340 | "dest": "/fa/", 341 | "mode": -1, 342 | "followSymlink": true, 343 | "dirCopyContents": true, 344 | "createDestPath": true, 345 | "allowWildcard": true, 346 | "allowEmptyWildcard": true, 347 | "timestamp": -1 348 | } 349 | } 350 | } 351 | ] 352 | } 353 | }, 354 | "constraints": {} 355 | }, 356 | "inputs": [ 357 | "step2:0" 358 | ] 359 | }, 360 | { 361 | "id": "step4", 362 | "op": { 363 | "Op": { 364 | "Merge": { 365 | "inputs": [ 366 | {}, 367 | { 368 | "input": 1 369 | } 370 | ] 371 | } 372 | }, 373 | "constraints": {} 374 | }, 375 | "inputs": [ 376 | "step1:0", 377 | "step3:0" 378 | ] 379 | }, 380 | { 381 | "id": "step5", 382 | "op": { 383 | "Op": { 384 | "File": { 385 | "actions": [ 386 | { 387 | "input": -1, 388 | "Action": { 389 | "Copy": { 390 | "src": "/config.json", 391 | "dest": "/fa/", 392 | "mode": -1, 393 | "followSymlink": true, 394 | "dirCopyContents": true, 395 | "createDestPath": true, 396 | "allowWildcard": true, 397 | "allowEmptyWildcard": true, 398 | "timestamp": -1 399 | } 400 | } 401 | } 402 | ] 403 | } 404 | }, 405 | "constraints": {} 406 | }, 407 | "inputs": [ 408 | "step2:0" 409 | ] 410 | }, 411 | { 412 | "id": "step6", 413 | "op": { 414 | "Op": { 415 | "Merge": { 416 | "inputs": [ 417 | {}, 418 | { 419 | "input": 1 420 | } 421 | ] 422 | } 423 | }, 424 | "constraints": {} 425 | }, 426 | "inputs": [ 427 | "step4:0", 428 | "step5:0" 429 | ] 430 | }, 431 | { 432 | "id": "step7", 433 | "op": { 434 | "Op": { 435 | "Exec": { 436 | "meta": { 437 | "args": [ 438 | "/bin/sh", 439 | "-c", 440 | "npm set cache /usr/src/app/.npm \u0026\u0026 npm ci" 441 | ], 442 | "env": [ 443 | "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin", 444 | "NODE_VERSION=23.2.0", 445 | "YARN_VERSION=1.22.22" 446 | ], 447 | "cwd": "/fa", 448 | "removeMountStubsRecursive": true 449 | }, 450 | "mounts": [ 451 | { 452 | "dest": "/" 453 | }, 454 | { 455 | "input": -1, 456 | "dest": "/usr/src/app/.npm", 457 | "output": -1, 458 | "mountType": 3, 459 | "cacheOpt": { 460 | "ID": "//usr/src/app/.npm" 461 | } 462 | } 463 | ] 464 | } 465 | }, 466 | "platform": { 467 | "Architecture": "amd64", 468 | "OS": "linux" 469 | }, 470 | "constraints": {} 471 | }, 472 | "inputs": [ 473 | "step6:0" 474 | ] 475 | }, 476 | { 477 | "id": "step8", 478 | "op": { 479 | "Op": { 480 | "File": { 481 | "actions": [ 482 | { 483 | "input": -1, 484 | "Action": { 485 | "Copy": { 486 | "src": "/base", 487 | "dest": "/fa/base", 488 | "mode": -1, 489 | "followSymlink": true, 490 | "dirCopyContents": true, 491 | "createDestPath": true, 492 | "allowWildcard": true, 493 | "allowEmptyWildcard": true, 494 | "timestamp": -1 495 | } 496 | } 497 | } 498 | ] 499 | } 500 | }, 501 | "constraints": {} 502 | }, 503 | "inputs": [ 504 | "step2:0" 505 | ] 506 | }, 507 | { 508 | "id": "step9", 509 | "op": { 510 | "Op": { 511 | "Merge": { 512 | "inputs": [ 513 | {}, 514 | { 515 | "input": 1 516 | } 517 | ] 518 | } 519 | }, 520 | "constraints": {} 521 | }, 522 | "inputs": [ 523 | "step7:0", 524 | "step8:0" 525 | ] 526 | }, 527 | { 528 | "id": "step10", 529 | "op": { 530 | "Op": { 531 | "Exec": { 532 | "meta": { 533 | "args": [ 534 | "/bin/sh", 535 | "-c", 536 | "npm set cache /usr/src/app/.npm \u0026\u0026 npm ci --include=dev" 537 | ], 538 | "env": [ 539 | "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin", 540 | "NODE_VERSION=23.2.0", 541 | "YARN_VERSION=1.22.22" 542 | ], 543 | "cwd": "/fa", 544 | "removeMountStubsRecursive": true 545 | }, 546 | "mounts": [ 547 | { 548 | "dest": "/" 549 | }, 550 | { 551 | "input": -1, 552 | "dest": "/usr/src/app/.npm", 553 | "output": -1, 554 | "mountType": 3, 555 | "cacheOpt": { 556 | "ID": "//usr/src/app/.npm" 557 | } 558 | } 559 | ] 560 | } 561 | }, 562 | "platform": { 563 | "Architecture": "amd64", 564 | "OS": "linux" 565 | }, 566 | "constraints": {} 567 | }, 568 | "inputs": [ 569 | "step4:0" 570 | ] 571 | }, 572 | { 573 | "id": "step11", 574 | "op": { 575 | "Op": { 576 | "File": { 577 | "actions": [ 578 | { 579 | "input": -1, 580 | "Action": { 581 | "Copy": { 582 | "src": "/tsconfig.json", 583 | "dest": "/fa/", 584 | "mode": -1, 585 | "followSymlink": true, 586 | "dirCopyContents": true, 587 | "createDestPath": true, 588 | "allowWildcard": true, 589 | "allowEmptyWildcard": true, 590 | "timestamp": -1 591 | } 592 | } 593 | } 594 | ] 595 | } 596 | }, 597 | "constraints": {} 598 | }, 599 | "inputs": [ 600 | "step2:0" 601 | ] 602 | }, 603 | { 604 | "id": "step12", 605 | "op": { 606 | "Op": { 607 | "Merge": { 608 | "inputs": [ 609 | {}, 610 | { 611 | "input": 1 612 | } 613 | ] 614 | } 615 | }, 616 | "constraints": {} 617 | }, 618 | "inputs": [ 619 | "step10:0", 620 | "step11:0" 621 | ] 622 | }, 623 | { 624 | "id": "step13", 625 | "op": { 626 | "Op": { 627 | "File": { 628 | "actions": [ 629 | { 630 | "input": -1, 631 | "Action": { 632 | "Copy": { 633 | "src": "/src", 634 | "dest": "/fa/src", 635 | "mode": -1, 636 | "followSymlink": true, 637 | "dirCopyContents": true, 638 | "createDestPath": true, 639 | "allowWildcard": true, 640 | "allowEmptyWildcard": true, 641 | "timestamp": -1 642 | } 643 | } 644 | } 645 | ] 646 | } 647 | }, 648 | "constraints": {} 649 | }, 650 | "inputs": [ 651 | "step2:0" 652 | ] 653 | }, 654 | { 655 | "id": "step14", 656 | "op": { 657 | "Op": { 658 | "Merge": { 659 | "inputs": [ 660 | {}, 661 | { 662 | "input": 1 663 | } 664 | ] 665 | } 666 | }, 667 | "constraints": {} 668 | }, 669 | "inputs": [ 670 | "step12:0", 671 | "step13:0" 672 | ] 673 | }, 674 | { 675 | "id": "step15", 676 | "op": { 677 | "Op": { 678 | "Exec": { 679 | "meta": { 680 | "args": [ 681 | "/bin/sh", 682 | "-c", 683 | "npm run build" 684 | ], 685 | "env": [ 686 | "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin", 687 | "NODE_VERSION=23.2.0", 688 | "YARN_VERSION=1.22.22" 689 | ], 690 | "cwd": "/fa", 691 | "removeMountStubsRecursive": true 692 | }, 693 | "mounts": [ 694 | { 695 | "dest": "/" 696 | } 697 | ] 698 | } 699 | }, 700 | "platform": { 701 | "Architecture": "amd64", 702 | "OS": "linux" 703 | }, 704 | "constraints": {} 705 | }, 706 | "inputs": [ 707 | "step14:0" 708 | ] 709 | }, 710 | { 711 | "id": "step16", 712 | "op": { 713 | "Op": { 714 | "File": { 715 | "actions": [ 716 | { 717 | "input": -1, 718 | "Action": { 719 | "Copy": { 720 | "src": "/fa/dist/generator", 721 | "dest": "/fa/", 722 | "mode": -1, 723 | "followSymlink": true, 724 | "dirCopyContents": true, 725 | "createDestPath": true, 726 | "allowWildcard": true, 727 | "allowEmptyWildcard": true, 728 | "timestamp": -1 729 | } 730 | } 731 | } 732 | ] 733 | } 734 | }, 735 | "constraints": {} 736 | }, 737 | "inputs": [ 738 | "step15:0" 739 | ] 740 | }, 741 | { 742 | "id": "step17", 743 | "op": { 744 | "Op": { 745 | "Merge": { 746 | "inputs": [ 747 | {}, 748 | { 749 | "input": 1 750 | } 751 | ] 752 | } 753 | }, 754 | "constraints": {} 755 | }, 756 | "inputs": [ 757 | "step9:0", 758 | "step16:0" 759 | ] 760 | }, 761 | { 762 | "id": "step18", 763 | "op": { 764 | "Op": { 765 | "Exec": { 766 | "meta": { 767 | "args": [ 768 | "node", 769 | "--enable-source-maps", 770 | "./cli.js" 771 | ], 772 | "env": [ 773 | "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin", 774 | "NODE_VERSION=23.2.0", 775 | "YARN_VERSION=1.22.22", 776 | "ELM_FONTAWESOME_VERSION=7.2.0" 777 | ], 778 | "cwd": "/fa", 779 | "removeMountStubsRecursive": true 780 | }, 781 | "mounts": [ 782 | { 783 | "dest": "/" 784 | } 785 | ] 786 | } 787 | }, 788 | "platform": { 789 | "Architecture": "amd64", 790 | "OS": "linux" 791 | }, 792 | "constraints": {} 793 | }, 794 | "inputs": [ 795 | "step17:0" 796 | ] 797 | }, 798 | { 799 | "id": "step19", 800 | "op": { 801 | "Op": { 802 | "File": { 803 | "actions": [ 804 | { 805 | "input": -1, 806 | "Action": { 807 | "Copy": { 808 | "src": "/fa/dist/lib", 809 | "dest": "/.", 810 | "mode": -1, 811 | "followSymlink": true, 812 | "dirCopyContents": true, 813 | "createDestPath": true, 814 | "allowWildcard": true, 815 | "allowEmptyWildcard": true, 816 | "timestamp": -1 817 | } 818 | } 819 | } 820 | ] 821 | } 822 | }, 823 | "constraints": {} 824 | }, 825 | "inputs": [ 826 | "step18:0" 827 | ] 828 | }, 829 | { 830 | "id": "step20", 831 | "op": { 832 | "Op": null 833 | }, 834 | "inputs": [ 835 | "step19:0" 836 | ] 837 | } 838 | ], 839 | "digestMapping": { 840 | "sha256:02e49d483f46d0e78cb5c77f44a35aac2fb074391eb97ff8feab517a07678898": "step6", 841 | "sha256:0a1f9dd431b9de516ee47a177a160a54b9cf72587abbbf8b79836ea7258a858b": "step5", 842 | "sha256:0e3980f4473e65617985c1a68e7d8cdc080d8bc16c05780090bb183f3ba9d460": "step3", 843 | "sha256:24e1b2e790ae50755f5093ea341c74e0567afc144a2fe03fadb42102bae8afc1": "step0", 844 | "sha256:49b2beb36ea7bce11d2acb7c2c9f9982e3ce59943884123b4f98d0e80c2d9de5": "step15", 845 | "sha256:4d1a8582b4a472eb2444e0c37536d3925f2c5591320382b4330755fc0fb61052": "step11", 846 | "sha256:5e34eac42a9d4a72cf0a3a63f71065d34410a4ca2ee89f364226767b9f6aa622": "step13", 847 | "sha256:75067e527710d8cc43b349e4680c053a32d9e72dccd3f5e796ff4002a7fa8508": "step4", 848 | "sha256:8ae70d53e7a764626ce8f7251dc2b1be48c1eb4db48ea4bf59e7e37b27744a3d": "step7", 849 | "sha256:9c3d19f972c93770964c4cb7cdec15ad5e5b86829fd28df3922cbd6adc8bd5c0": "step12", 850 | "sha256:a15abc10c0d1d67da50b18675d80bf6ad83337ae0eadd2ef2ea0e56def47bddd": "step1", 851 | "sha256:a1e2d2148ef71027822eda488a7a2a4f37bb5b5a222f246ec8a060dffbb27caf": "step14", 852 | "sha256:b56069a4eac2fe65000b798341815f89ad1fa52e6c95b984c5a0ab4bd4c84b79": "step2", 853 | "sha256:ba643c4415afcd099c6a94041ef49d2dde9ec4425dcab034e9f5d22785b6f7e4": "step19", 854 | "sha256:c1cd15baa5443672e2cb5c1023a4ab9b1dd8ccc1b75f23dcd1b89ff342a856d5": "step16", 855 | "sha256:d036915cd721f333c96e8d3a78dcc868910c2377b201aa1f68f54144ffacb740": "step17", 856 | "sha256:d4123ddd81813419680dda59ce7a4796967fec49e5daa7da4b7966cb019a2922": "step10", 857 | "sha256:dcda5a0c73b5fa8ae386e1976eed992836abd4902c75f8ea22e7dd12e9d449cc": "step18", 858 | "sha256:e9de1e01710cf3e877d7c8c4ffc2b8d528cb64d54834215eb72a23511c8cc85d": "step20", 859 | "sha256:ee2a025788fab65d9abbd348ee99f54d3759e721f17c7b40c516cd4c9ddf9d97": "step9", 860 | "sha256:fa58b1298b37616083c7e1edb1218e2e296bd4df1670d3d38f7fc5c431c0dfc2": "step8" 861 | } 862 | }, 863 | "metadata": { 864 | "buildInvocationID": "go6jychfbjy5yn869onwxc7wp", 865 | "buildStartedOn": "2024-11-19T23:01:35.897723111Z", 866 | "buildFinishedOn": "2024-11-19T23:01:51.148934738Z", 867 | "completeness": { 868 | "parameters": true, 869 | "environment": true, 870 | "materials": false 871 | }, 872 | "reproducible": false, 873 | "https://mobyproject.org/buildkit@v1#metadata": { 874 | "vcs": { 875 | "localdir:context": ".", 876 | "localdir:dockerfile": ".", 877 | "revision": "da8616ae896178e433e2dbe925e23e7c1c55b22d", 878 | "source": "https://github.com/Lattyware/elm-fontawesome-generator" 879 | }, 880 | "source": { 881 | "locations": { 882 | "step0": { 883 | "locations": [ 884 | { 885 | "ranges": [ 886 | { 887 | "start": { 888 | "line": 5 889 | }, 890 | "end": { 891 | "line": 5 892 | } 893 | } 894 | ] 895 | } 896 | ] 897 | }, 898 | "step1": { 899 | "locations": [ 900 | { 901 | "ranges": [ 902 | { 903 | "start": { 904 | "line": 7 905 | }, 906 | "end": { 907 | "line": 7 908 | } 909 | } 910 | ] 911 | } 912 | ] 913 | }, 914 | "step10": { 915 | "locations": [ 916 | { 917 | "ranges": [ 918 | { 919 | "start": { 920 | "line": 15 921 | }, 922 | "end": { 923 | "line": 15 924 | } 925 | }, 926 | { 927 | "start": { 928 | "line": 16 929 | }, 930 | "end": { 931 | "line": 16 932 | } 933 | }, 934 | { 935 | "start": { 936 | "line": 17 937 | }, 938 | "end": { 939 | "line": 17 940 | } 941 | }, 942 | { 943 | "start": { 944 | "line": 18 945 | }, 946 | "end": { 947 | "line": 18 948 | } 949 | } 950 | ] 951 | } 952 | ] 953 | }, 954 | "step11": { 955 | "locations": [ 956 | { 957 | "ranges": [ 958 | { 959 | "start": { 960 | "line": 20 961 | }, 962 | "end": { 963 | "line": 20 964 | } 965 | } 966 | ] 967 | } 968 | ] 969 | }, 970 | "step12": { 971 | "locations": [ 972 | { 973 | "ranges": [ 974 | { 975 | "start": { 976 | "line": 20 977 | }, 978 | "end": { 979 | "line": 20 980 | } 981 | } 982 | ] 983 | } 984 | ] 985 | }, 986 | "step13": { 987 | "locations": [ 988 | { 989 | "ranges": [ 990 | { 991 | "start": { 992 | "line": 21 993 | }, 994 | "end": { 995 | "line": 21 996 | } 997 | } 998 | ] 999 | } 1000 | ] 1001 | }, 1002 | "step14": { 1003 | "locations": [ 1004 | { 1005 | "ranges": [ 1006 | { 1007 | "start": { 1008 | "line": 21 1009 | }, 1010 | "end": { 1011 | "line": 21 1012 | } 1013 | } 1014 | ] 1015 | } 1016 | ] 1017 | }, 1018 | "step15": { 1019 | "locations": [ 1020 | { 1021 | "ranges": [ 1022 | { 1023 | "start": { 1024 | "line": 22 1025 | }, 1026 | "end": { 1027 | "line": 22 1028 | } 1029 | } 1030 | ] 1031 | } 1032 | ] 1033 | }, 1034 | "step16": { 1035 | "locations": [ 1036 | { 1037 | "ranges": [ 1038 | { 1039 | "start": { 1040 | "line": 36 1041 | }, 1042 | "end": { 1043 | "line": 36 1044 | } 1045 | } 1046 | ] 1047 | } 1048 | ] 1049 | }, 1050 | "step17": { 1051 | "locations": [ 1052 | { 1053 | "ranges": [ 1054 | { 1055 | "start": { 1056 | "line": 36 1057 | }, 1058 | "end": { 1059 | "line": 36 1060 | } 1061 | } 1062 | ] 1063 | } 1064 | ] 1065 | }, 1066 | "step18": { 1067 | "locations": [ 1068 | { 1069 | "ranges": [ 1070 | { 1071 | "start": { 1072 | "line": 47 1073 | }, 1074 | "end": { 1075 | "line": 47 1076 | } 1077 | } 1078 | ] 1079 | } 1080 | ] 1081 | }, 1082 | "step19": { 1083 | "locations": [ 1084 | { 1085 | "ranges": [ 1086 | { 1087 | "start": { 1088 | "line": 53 1089 | }, 1090 | "end": { 1091 | "line": 53 1092 | } 1093 | } 1094 | ] 1095 | } 1096 | ] 1097 | }, 1098 | "step2": {}, 1099 | "step3": { 1100 | "locations": [ 1101 | { 1102 | "ranges": [ 1103 | { 1104 | "start": { 1105 | "line": 9 1106 | }, 1107 | "end": { 1108 | "line": 9 1109 | } 1110 | } 1111 | ] 1112 | } 1113 | ] 1114 | }, 1115 | "step4": { 1116 | "locations": [ 1117 | { 1118 | "ranges": [ 1119 | { 1120 | "start": { 1121 | "line": 9 1122 | }, 1123 | "end": { 1124 | "line": 9 1125 | } 1126 | } 1127 | ] 1128 | } 1129 | ] 1130 | }, 1131 | "step5": { 1132 | "locations": [ 1133 | { 1134 | "ranges": [ 1135 | { 1136 | "start": { 1137 | "line": 29 1138 | }, 1139 | "end": { 1140 | "line": 29 1141 | } 1142 | } 1143 | ] 1144 | } 1145 | ] 1146 | }, 1147 | "step6": { 1148 | "locations": [ 1149 | { 1150 | "ranges": [ 1151 | { 1152 | "start": { 1153 | "line": 29 1154 | }, 1155 | "end": { 1156 | "line": 29 1157 | } 1158 | } 1159 | ] 1160 | } 1161 | ] 1162 | }, 1163 | "step7": { 1164 | "locations": [ 1165 | { 1166 | "ranges": [ 1167 | { 1168 | "start": { 1169 | "line": 30 1170 | }, 1171 | "end": { 1172 | "line": 30 1173 | } 1174 | }, 1175 | { 1176 | "start": { 1177 | "line": 31 1178 | }, 1179 | "end": { 1180 | "line": 31 1181 | } 1182 | }, 1183 | { 1184 | "start": { 1185 | "line": 32 1186 | }, 1187 | "end": { 1188 | "line": 32 1189 | } 1190 | }, 1191 | { 1192 | "start": { 1193 | "line": 33 1194 | }, 1195 | "end": { 1196 | "line": 33 1197 | } 1198 | } 1199 | ] 1200 | } 1201 | ] 1202 | }, 1203 | "step8": { 1204 | "locations": [ 1205 | { 1206 | "ranges": [ 1207 | { 1208 | "start": { 1209 | "line": 35 1210 | }, 1211 | "end": { 1212 | "line": 35 1213 | } 1214 | } 1215 | ] 1216 | } 1217 | ] 1218 | }, 1219 | "step9": { 1220 | "locations": [ 1221 | { 1222 | "ranges": [ 1223 | { 1224 | "start": { 1225 | "line": 35 1226 | }, 1227 | "end": { 1228 | "line": 35 1229 | } 1230 | } 1231 | ] 1232 | } 1233 | ] 1234 | } 1235 | }, 1236 | "infos": [ 1237 | { 1238 | "filename": "Dockerfile", 1239 | "language": "Dockerfile", 1240 | "data": "QVJHIE5PREVfVkVSU0lPTj0yMwpBUkcgRUxNX0ZPTlRBV0VTT01FX1ZFUlNJT04KCgpGUk9NIG5vZGU6JHtOT0RFX1ZFUlNJT059LWFscGluZSBBUyBiYXNlCgpXT1JLRElSICIvZmEiCgpDT1BZIC0tbGluayBbIi4vcGFja2FnZS5qc29uIiwgIi4vcGFja2FnZS1sb2NrLmpzb24iLCAiZWxtLXRvb2xpbmcuanNvbiIsICIuLyJdCgoKIyBCdWlsZCB0aGUgZ2VuZXJhdG9yLgpGUk9NIGJhc2UgQVMgYnVpbGQKClJVTiBcCiAgLS1tb3VudD10eXBlPWNhY2hlLHRhcmdldD0vdXNyL3NyYy9hcHAvLm5wbSBcCiAgbnBtIHNldCBjYWNoZSAvdXNyL3NyYy9hcHAvLm5wbSAmJiBcCiAgbnBtIGNpIC0taW5jbHVkZT1kZXYKCkNPUFkgLS1saW5rIFsiLi90c2NvbmZpZy5qc29uIiwgIi4vIl0KQ09QWSAtLWxpbmsgWyIuL3NyYyIsICIuL3NyYyJdClJVTiBucG0gcnVuIGJ1aWxkCgoKIyBJbWFnZSBmb3IgdGhlIGdlbmVyYXRvci4gCiMgYC0tdGFyZ2V0IGdlbmVyYXRvcmAgdG8gc3RvcCBoZXJlIGFuZCBnZXQgYW4gaW1hZ2UgdG8gZ2VuZXJhdGUgd2l0aCByZXBlYXRlZGx5LgpGUk9NIGJhc2UgQVMgZ2VuZXJhdG9yCgpDT1BZIC0tbGluayBbIi4vY29uZmlnLmpzb24iLCAiLi8iXQpSVU4gXAogIC0tbW91bnQ9dHlwZT1jYWNoZSx0YXJnZXQ9L3Vzci9zcmMvYXBwLy5ucG0gXAogIG5wbSBzZXQgY2FjaGUgL3Vzci9zcmMvYXBwLy5ucG0gJiYgXAogIG5wbSBjaQoKQ09QWSAtLWxpbmsgWyIuL2Jhc2UiLCAiLi9iYXNlIl0KQ09QWSAtLWxpbmsgLS1mcm9tPWJ1aWxkIFsiL2ZhL2Rpc3QvZ2VuZXJhdG9yIiwgIi4vIl0KCkNNRCBbIm5vZGUiLCAiLS1lbmFibGUtc291cmNlLW1hcHMiLCAiLi9jbGkuanMiXQoKCiMgQWN0dWFsbHkgZXhlY3V0ZSB0aGUgZ2VuZXJhdG9yLgpGUk9NIGdlbmVyYXRvciBBUyBnZW5lcmF0ZQoKQVJHIEVMTV9GT05UQVdFU09NRV9WRVJTSU9OCkVOViBFTE1fRk9OVEFXRVNPTUVfVkVSU0lPTj0ke0VMTV9GT05UQVdFU09NRV9WRVJTSU9OfQoKUlVOIFsibm9kZSIsICItLWVuYWJsZS1zb3VyY2UtbWFwcyIsICIuL2NsaS5qcyJdCgoKIyBKdXN0IGtlZXAgdGhlIGdlbmVyYXRlZCBmaWxlcy4KRlJPTSBzY3JhdGNoIEFTIGdlbmVyYXRlZAoKQ09QWSAtLWxpbmsgLS1mcm9tPWdlbmVyYXRlIFsiL2ZhL2Rpc3QvbGliLy4iLCAiLy4iXQo=", 1241 | "llbDefinition": [ 1242 | { 1243 | "id": "step0", 1244 | "op": { 1245 | "Op": { 1246 | "Source": { 1247 | "identifier": "local://dockerfile", 1248 | "attrs": { 1249 | "local.differ": "none", 1250 | "local.followpaths": "[\"Dockerfile\",\"Dockerfile.dockerignore\",\"dockerfile\"]", 1251 | "local.sharedkeyhint": "dockerfile" 1252 | } 1253 | } 1254 | }, 1255 | "constraints": {} 1256 | } 1257 | }, 1258 | { 1259 | "id": "step1", 1260 | "op": { 1261 | "Op": null 1262 | }, 1263 | "inputs": [ 1264 | "step0:0" 1265 | ] 1266 | } 1267 | ], 1268 | "digestMapping": { 1269 | "sha256:5c49136966e0fe033b4cbea14c52085571d061ddb74e277dac2dceda500f1cbc": "step0", 1270 | "sha256:e60073e19e601b1b3db4e09c9175c483e4deee0f1ad8afd742335900e4bc86b7": "step1" 1271 | } 1272 | } 1273 | ] 1274 | }, 1275 | "layers": { 1276 | "step0:0": [ 1277 | [ 1278 | { 1279 | "mediaType": "application/vnd.oci.image.layer.v1.tar+gzip", 1280 | "digest": "sha256:da9db072f522755cbeb85be2b3f84059b70571b229512f1571d9217b77e1087f", 1281 | "size": 3623904 1282 | }, 1283 | { 1284 | "mediaType": "application/vnd.oci.image.layer.v1.tar+gzip", 1285 | "digest": "sha256:1a1585882d0c70bfb6a19ce622a84e6ab0d514601bbbbc36bffa44ecf889e087", 1286 | "size": 50874522 1287 | }, 1288 | { 1289 | "mediaType": "application/vnd.oci.image.layer.v1.tar+gzip", 1290 | "digest": "sha256:6f0d65816d6415a9b9a439c57513d4bb8c88148b721bd8caf8cc33af35b95f9a", 1291 | "size": 1386281 1292 | }, 1293 | { 1294 | "mediaType": "application/vnd.oci.image.layer.v1.tar+gzip", 1295 | "digest": "sha256:d2e4e776a692ca1e8caf2f64174bfa196c058c1c2b7b256c3d4cd55f0d71dc69", 1296 | "size": 446 1297 | } 1298 | ] 1299 | ] 1300 | } 1301 | } 1302 | } 1303 | } 1304 | } -------------------------------------------------------------------------------- /src/FontAwesome.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome exposing 2 | ( Icon, WithId, WithoutId 3 | , view 4 | , styled, transform 5 | , withId 6 | , titled, masked 7 | , IconDef, present 8 | ) 9 | 10 | {-| Rendering icons for use in HTML. 11 | 12 | This library is designed with a pipeline style, at its simplest: 13 | 14 | icon |> view 15 | 16 | More complex pipelines can be created by adding steps between these. 17 | 18 | @docs Icon, WithId, WithoutId 19 | 20 | @docs view 21 | 22 | @docs styled, transform 23 | 24 | @docs withId 25 | 26 | @docs titled, masked 27 | 28 | @docs IconDef, present 29 | 30 | -} 31 | 32 | import FontAwesome.Internal as Internal exposing (Icon(..), WithId, WithoutId) 33 | import FontAwesome.Svg as IconSvg 34 | import FontAwesome.Transforms exposing (..) 35 | import FontAwesome.Transforms.Internal exposing (..) 36 | import Html exposing (Html) 37 | import Html.Attributes as HtmlA 38 | import Svg exposing (Svg) 39 | import Svg.Attributes as SvgA 40 | 41 | 42 | {-| The definition of an icon. 43 | 44 | You will find these in the modules for the different IconDef packs (e.g: `FontAwesome.Solid.Definition`). 45 | You should never need to define these or change them yourself (but you can to create custom icons). 46 | 47 | Generally you want to work with `Icon` instead, which can be found in the parent packs. 48 | 49 | -} 50 | type alias IconDef = 51 | { prefix : String 52 | , name : String 53 | , size : ( Int, Int ) 54 | , paths : ( String, Maybe String ) 55 | } 56 | 57 | 58 | {-| Information on how an icon should be rendered. In general, you shouldn't need to interact directly with this type - 59 | it should generally only exist in a chain of operations to display an icon. 60 | 61 | Adding titles or using masking require that the icon has a unique id. This is because references are made in the HTML 62 | via the HTML `id` attribute, which must be unique on the page. Views with an id will have the `WithId` 63 | type and will therefore work with those options, while ones that have the `WithoutId` type won't. 64 | 65 | -} 66 | type alias Icon hasId = 67 | Internal.Icon hasId 68 | 69 | 70 | {-| Indicates that the presentation has an id, which lets you use `titled` and `masked`. For more on why those features 71 | are "locked" like this, see the documentation for the `View` type above. 72 | -} 73 | type alias WithId = 74 | Internal.WithId 75 | 76 | 77 | {-| Indicates that the presentation does not have an id, which means you can't use `titled` and `masked`. For more on 78 | why those features are "locked" like this, see the documentation for the `View` type above. 79 | -} 80 | type alias WithoutId = 81 | Internal.WithoutId 82 | 83 | 84 | def = 85 | IconDef 86 | 87 | 88 | {-| Gets a basic presentation of an icon. 89 | 90 | If you do nothing else an pass this to view, the icon will be presented as semantically meaningless (i.e: purely 91 | decorative) and will be hidden from accessibility tools. If you need the icon to have semantic meaning then using 92 | `titled` will change that. 93 | 94 | -} 95 | present : IconDef -> Icon WithoutId 96 | present icon = 97 | Icon 98 | { icon = icon 99 | , transforms = [] 100 | , role = "img" 101 | , id = Nothing 102 | , title = Nothing 103 | , outer = Nothing 104 | , attributes = [] 105 | } 106 | 107 | 108 | {-| Render the given icon to HTML. 109 | -} 110 | view : Icon hasId -> Html msg 111 | view presentation = 112 | internalView presentation [] 113 | 114 | 115 | {-| Render the given icon to HTML with custom attributes applied. 116 | 117 | Please note this takes `Svg.Attribute`s, and while `Html.Attribute`s will pass the type check, they are 118 | not compatible and may not work or even result in errors if used. Please be sure to use `Svg.Attribute`s 119 | instead. 120 | 121 | Generally you just want to use `styled` instead, but this lets you use 122 | `Svg.Attributes` that can produce messsages. 123 | 124 | -} 125 | viewWithAttributes : Icon hasId -> List (Svg.Attribute msg) -> Html msg 126 | viewWithAttributes presentation attributes = 127 | internalView presentation attributes 128 | 129 | 130 | {-| Add the given attributes to the icon's presentation. These will be applied to the icon when viewed. 131 | Note the icon is an `svg` tag, and it appears that using `Html.Attribute.class` will remove any `Svg.Attribute.class` 132 | values that are set, including FontAwesome ones that make the icon work, so make sure to use `Svg.Attribute.class` with 133 | this. 134 | 135 | Due to this taking `Svg.Attribute Never` you can't use attributes that can 136 | produce messages. You can use `viewWithAttributes` to add such attributes if 137 | required. 138 | 139 | -} 140 | styled : List (Svg.Attribute Never) -> Icon hasId -> Icon hasId 141 | styled attributes (Icon presentation) = 142 | Icon { presentation | attributes = presentation.attributes ++ attributes } 143 | 144 | 145 | {-| Add the given transforms to the icon's presentation. These will be applied to the icon when viewed. 146 | -} 147 | transform : List Transform -> Icon hasId -> Icon hasId 148 | transform transforms (Icon presentation) = 149 | Icon { presentation | transforms = presentation.transforms ++ transforms } 150 | 151 | 152 | {-| Set [the HTML role](https://www.w3.org/TR/wai-aria/#usage_intro) for the icon. By default, this is `"img"`. 153 | -} 154 | withRole : String -> Icon hasId -> Icon hasId 155 | withRole role (Icon presentation) = 156 | Icon { presentation | role = role } 157 | 158 | 159 | {-| Set the HTML id for the icon presentation to the given value. This must be unique on the page. 160 | 161 | The FontAwesome JavaScript library generates random ids for this. Doing this in elm is a little more cumbersome, but 162 | is possible if you need to dynamically generate items and don't have existing ids to work from. Please see 163 | [the `elm-fontawesome-example` repository](https://github.com/Lattyware/elm-fontawesome-example) for an example of this. 164 | 165 | -} 166 | withId : String -> Icon WithoutId -> Icon WithId 167 | withId id (Icon presentation) = 168 | Icon { presentation | id = Just id } 169 | 170 | 171 | {-| Sets the title of the presented icon. This will make the icon semantically meaningful, and as such it won't be 172 | hidden from accessibility tools. 173 | 174 | Note that this can only be applied where the icon has an id unique on the page as it uses that id under the hood in the 175 | HTML. Use `withId` to add one. 176 | 177 | -} 178 | titled : String -> Icon WithId -> Icon WithId 179 | titled title (Icon presentation) = 180 | Icon { presentation | title = Just title } 181 | 182 | 183 | {-| Sets an outer icon that the main icon is masking (i.e.: the initial icon will become a "cut out" of this outer 184 | icon). This creates true transparency. 185 | 186 | Note that this can only be applied where the icon to be masked has an id unique on the page as it uses that id under the 187 | hood in the HTML. Use `withId` to add one. 188 | 189 | -} 190 | masked : Icon WithId -> Icon hasId -> Icon hasId 191 | masked outer (Icon presentation) = 192 | Icon { presentation | outer = Just outer } 193 | 194 | 195 | 196 | {- Private -} 197 | 198 | 199 | internalView : Icon hasId -> List (Svg.Attribute msg) -> Html msg 200 | internalView ((Icon { icon, transforms, role, id, title, outer, attributes }) as fullIcon) extraAttributes = 201 | let 202 | ( width, height ) = 203 | Internal.topLevelDimensions fullIcon 204 | 205 | aspectRatio = 206 | (toFloat width / toFloat height * 16) |> ceiling 207 | 208 | classes = 209 | [ "svg-inline--fa" 210 | , "fa-" ++ icon.name 211 | , "fa-w-" ++ (aspectRatio |> String.fromInt) 212 | ] 213 | 214 | contents = 215 | IconSvg.view fullIcon 216 | 217 | ( semantics, potentiallyTitledContents ) = 218 | case title of 219 | Just givenTitle -> 220 | let 221 | titleId = 222 | (id |> Maybe.withDefault "") ++ "-title" 223 | in 224 | ( HtmlA.attribute "aria-labelledby" titleId 225 | , [ Svg.title [ SvgA.id titleId ] [ Svg.text givenTitle ], contents ] 226 | ) 227 | 228 | Nothing -> 229 | ( HtmlA.attribute "aria-hidden" "true", [ contents ] ) 230 | in 231 | Svg.svg 232 | (List.concat 233 | [ [ HtmlA.attribute "role" role 234 | , HtmlA.attribute "xmlns" "http://www.w3.org/2000/svg" 235 | , SvgA.viewBox ("0 0 " ++ String.fromInt width ++ " " ++ String.fromInt height) 236 | , semantics 237 | ] 238 | , classes |> List.map SvgA.class 239 | , attributes |> List.map (HtmlA.map never) 240 | , extraAttributes 241 | ] 242 | ) 243 | potentiallyTitledContents 244 | 245 | 246 | {-| This function exists purely to trigger an error if these two types fall out of sync, as they should be the same. 247 | -} 248 | updateInternalIcon : IconDef -> Internal.IconDef 249 | updateInternalIcon icon = 250 | icon 251 | -------------------------------------------------------------------------------- /src/FontAwesome/Attributes.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Attributes exposing 2 | ( fa2xs, xs, sm, lg, x1, fa2x1, fa1x, fa2x, fa3x, fa4x, fa5x, fa6x, fa7x, fa8x, fa9x, fa10x 3 | , fw 4 | , ul, li 5 | , rotate90, rotate180, rotate270, flipHorizontal, flipVertical, flipBoth, flipRotateBy 6 | , beat, fade, beatFade, bounce, flip, shake, spin, spinPulse, spinReverse 7 | , pullLeft, pullRight, border 8 | , stack, stack1x, stack2x, inverse 9 | , swapOpacity 10 | ) 11 | 12 | {-| Styling attributes for icons. 13 | 14 | 15 | # Sizing Icons 16 | 17 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/size) 18 | 19 | @docs fa2xs, xs, sm, lg, x1, fa2x1, fa1x, fa2x, fa3x, fa4x, fa5x, fa6x, fa7x, fa8x, fa9x, fa10x 20 | 21 | 22 | # Fixed Width Icons 23 | 24 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/fixed-width) 25 | 26 | @docs fw 27 | 28 | 29 | # Icons in a List 30 | 31 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/lists) 32 | 33 | @docs ul, li 34 | 35 | 36 | # Rotating Icons 37 | 38 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/rotate) 39 | 40 | @docs rotate90, rotate180, rotate270, flipHorizontal, flipVertical, flipBoth, flipRotateBy 41 | 42 | 43 | # Animating Icons 44 | 45 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/animate) 46 | 47 | @docs beat, fade, beatFade, bounce, flip, shake, spin, spinPulse, spinReverse 48 | 49 | 50 | # Bordered + Pulled Icons 51 | 52 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/pull) 53 | 54 | @docs pullLeft, pullRight, border 55 | 56 | 57 | # Stacked Icons 58 | 59 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/stacking-icons) 60 | 61 | @docs stack, stack1x, stack2x, inverse 62 | 63 | 64 | # Duotone Icons 65 | 66 | [See the FontAwesome docs for details.](https://fontawesome.com/docs/web/style/duotone-icons) 67 | 68 | @docs swapOpacity 69 | 70 | -} 71 | 72 | import Svg 73 | import Svg.Attributes as SvgA 74 | 75 | 76 | {-| Apply the fa-2xs class to the element. 77 | -} 78 | fa2xs : Svg.Attribute msg 79 | fa2xs = 80 | SvgA.class "fa-2xs" 81 | 82 | 83 | {-| Apply the fa-xs class to the element. 84 | -} 85 | xs : Svg.Attribute msg 86 | xs = 87 | SvgA.class "fa-xs" 88 | 89 | 90 | {-| Apply the fa-sm class to the element. 91 | -} 92 | sm : Svg.Attribute msg 93 | sm = 94 | SvgA.class "fa-sm" 95 | 96 | 97 | {-| Apply the fa-lg class to the element. 98 | -} 99 | lg : Svg.Attribute msg 100 | lg = 101 | SvgA.class "fa-lg" 102 | 103 | 104 | {-| Apply the fa-x1 class to the element. 105 | -} 106 | x1 : Svg.Attribute msg 107 | x1 = 108 | SvgA.class "fa-x1" 109 | 110 | 111 | {-| Apply the fa-2x1 class to the element. 112 | -} 113 | fa2x1 : Svg.Attribute msg 114 | fa2x1 = 115 | SvgA.class "fa-2x1" 116 | 117 | 118 | {-| Apply the fa-1x class to the element. 119 | -} 120 | fa1x : Svg.Attribute msg 121 | fa1x = 122 | SvgA.class "fa-1x" 123 | 124 | 125 | {-| Apply the fa-2x class to the element. 126 | -} 127 | fa2x : Svg.Attribute msg 128 | fa2x = 129 | SvgA.class "fa-2x" 130 | 131 | 132 | {-| Apply the fa-3x class to the element. 133 | -} 134 | fa3x : Svg.Attribute msg 135 | fa3x = 136 | SvgA.class "fa-3x" 137 | 138 | 139 | {-| Apply the fa-4x class to the element. 140 | -} 141 | fa4x : Svg.Attribute msg 142 | fa4x = 143 | SvgA.class "fa-4x" 144 | 145 | 146 | {-| Apply the fa-5x class to the element. 147 | -} 148 | fa5x : Svg.Attribute msg 149 | fa5x = 150 | SvgA.class "fa-5x" 151 | 152 | 153 | {-| Apply the fa-6x class to the element. 154 | -} 155 | fa6x : Svg.Attribute msg 156 | fa6x = 157 | SvgA.class "fa-6x" 158 | 159 | 160 | {-| Apply the fa-7x class to the element. 161 | -} 162 | fa7x : Svg.Attribute msg 163 | fa7x = 164 | SvgA.class "fa-7x" 165 | 166 | 167 | {-| Apply the fa-8x class to the element. 168 | -} 169 | fa8x : Svg.Attribute msg 170 | fa8x = 171 | SvgA.class "fa-8x" 172 | 173 | 174 | {-| Apply the fa-9x class to the element. 175 | -} 176 | fa9x : Svg.Attribute msg 177 | fa9x = 178 | SvgA.class "fa-9x" 179 | 180 | 181 | {-| Apply the fa-10x class to the element. 182 | -} 183 | fa10x : Svg.Attribute msg 184 | fa10x = 185 | SvgA.class "fa-10x" 186 | 187 | 188 | {-| Apply the fa-fw class to the element. 189 | -} 190 | fw : Svg.Attribute msg 191 | fw = 192 | SvgA.class "fa-fw" 193 | 194 | 195 | {-| Apply the fa-ul class to the element. 196 | -} 197 | ul : Svg.Attribute msg 198 | ul = 199 | SvgA.class "fa-ul" 200 | 201 | 202 | {-| Apply the fa-li class to the element. 203 | -} 204 | li : Svg.Attribute msg 205 | li = 206 | SvgA.class "fa-li" 207 | 208 | 209 | {-| Apply the fa-rotate-90 class to the element. 210 | -} 211 | rotate90 : Svg.Attribute msg 212 | rotate90 = 213 | SvgA.class "fa-rotate-90" 214 | 215 | 216 | {-| Apply the fa-rotate-180 class to the element. 217 | -} 218 | rotate180 : Svg.Attribute msg 219 | rotate180 = 220 | SvgA.class "fa-rotate-180" 221 | 222 | 223 | {-| Apply the fa-rotate-270 class to the element. 224 | -} 225 | rotate270 : Svg.Attribute msg 226 | rotate270 = 227 | SvgA.class "fa-rotate-270" 228 | 229 | 230 | {-| Apply the fa-flip-horizontal class to the element. 231 | -} 232 | flipHorizontal : Svg.Attribute msg 233 | flipHorizontal = 234 | SvgA.class "fa-flip-horizontal" 235 | 236 | 237 | {-| Apply the fa-flip-vertical class to the element. 238 | -} 239 | flipVertical : Svg.Attribute msg 240 | flipVertical = 241 | SvgA.class "fa-flip-vertical" 242 | 243 | 244 | {-| Apply the fa-flip-both class to the element. 245 | -} 246 | flipBoth : Svg.Attribute msg 247 | flipBoth = 248 | SvgA.class "fa-flip-both" 249 | 250 | 251 | {-| Apply the fa-flip-rotate-by class to the element. 252 | -} 253 | flipRotateBy : Svg.Attribute msg 254 | flipRotateBy = 255 | SvgA.class "fa-flip-rotate-by" 256 | 257 | 258 | {-| Apply the fa-beat class to the element. 259 | -} 260 | beat : Svg.Attribute msg 261 | beat = 262 | SvgA.class "fa-beat" 263 | 264 | 265 | {-| Apply the fa-fade class to the element. 266 | -} 267 | fade : Svg.Attribute msg 268 | fade = 269 | SvgA.class "fa-fade" 270 | 271 | 272 | {-| Apply the fa-beat-fade class to the element. 273 | -} 274 | beatFade : Svg.Attribute msg 275 | beatFade = 276 | SvgA.class "fa-beat-fade" 277 | 278 | 279 | {-| Apply the fa-bounce class to the element. 280 | -} 281 | bounce : Svg.Attribute msg 282 | bounce = 283 | SvgA.class "fa-bounce" 284 | 285 | 286 | {-| Apply the fa-flip class to the element. 287 | -} 288 | flip : Svg.Attribute msg 289 | flip = 290 | SvgA.class "fa-flip" 291 | 292 | 293 | {-| Apply the fa-shake class to the element. 294 | -} 295 | shake : Svg.Attribute msg 296 | shake = 297 | SvgA.class "fa-shake" 298 | 299 | 300 | {-| Apply the fa-spin class to the element. 301 | -} 302 | spin : Svg.Attribute msg 303 | spin = 304 | SvgA.class "fa-spin" 305 | 306 | 307 | {-| Apply the fa-spin-pulse class to the element. 308 | -} 309 | spinPulse : Svg.Attribute msg 310 | spinPulse = 311 | SvgA.class "fa-spin-pulse" 312 | 313 | 314 | {-| Apply the fa-spin-reverse class to the element. 315 | -} 316 | spinReverse : Svg.Attribute msg 317 | spinReverse = 318 | SvgA.class "fa-spin-reverse" 319 | 320 | 321 | {-| Apply the fa-pull-left class to the element. 322 | -} 323 | pullLeft : Svg.Attribute msg 324 | pullLeft = 325 | SvgA.class "fa-pull-left" 326 | 327 | 328 | {-| Apply the fa-pull-right class to the element. 329 | -} 330 | pullRight : Svg.Attribute msg 331 | pullRight = 332 | SvgA.class "fa-pull-right" 333 | 334 | 335 | {-| Apply the fa-border class to the element. 336 | -} 337 | border : Svg.Attribute msg 338 | border = 339 | SvgA.class "fa-border" 340 | 341 | 342 | {-| Apply the fa-stack class to the element. 343 | -} 344 | stack : Svg.Attribute msg 345 | stack = 346 | SvgA.class "fa-stack" 347 | 348 | 349 | {-| Apply the fa-stack-1x class to the element. 350 | -} 351 | stack1x : Svg.Attribute msg 352 | stack1x = 353 | SvgA.class "fa-stack-1x" 354 | 355 | 356 | {-| Apply the fa-stack-2x class to the element. 357 | -} 358 | stack2x : Svg.Attribute msg 359 | stack2x = 360 | SvgA.class "fa-stack-2x" 361 | 362 | 363 | {-| Apply the fa-inverse class to the element. 364 | -} 365 | inverse : Svg.Attribute msg 366 | inverse = 367 | SvgA.class "fa-inverse" 368 | 369 | 370 | {-| Apply the fa-swap-opacity class to the element. 371 | -} 372 | swapOpacity : Svg.Attribute msg 373 | swapOpacity = 374 | SvgA.class "fa-swap-opacity" 375 | -------------------------------------------------------------------------------- /src/FontAwesome/Internal.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Internal exposing 2 | ( Icon(..) 3 | , IconDef 4 | , WithId 5 | , WithoutId 6 | , topLevelDimensions 7 | ) 8 | 9 | {-| Internal module to avoid a dependency cycle. 10 | -} 11 | 12 | import FontAwesome.Transforms exposing (Transform) 13 | import Svg 14 | 15 | 16 | {-| This must remain the same as the definition for `Icon.IconDef`. 17 | -} 18 | type alias IconDef = 19 | { prefix : String 20 | , name : String 21 | , size : ( Int, Int ) 22 | , paths : ( String, Maybe String ) 23 | } 24 | 25 | 26 | type WithId 27 | = WithId 28 | 29 | 30 | type WithoutId 31 | = WithoutId 32 | 33 | 34 | {-| Exposes the constructor here, but shouldn't publicly. 35 | -} 36 | type Icon hasId 37 | = Icon 38 | { icon : IconDef 39 | , transforms : List Transform 40 | , role : String 41 | , id : Maybe String 42 | , title : Maybe String 43 | , outer : Maybe (Icon WithId) 44 | , attributes : List (Svg.Attribute Never) 45 | } 46 | 47 | 48 | topLevelDimensions : Icon hasId -> ( Int, Int ) 49 | topLevelDimensions (Icon { icon, outer }) = 50 | outer 51 | |> Maybe.map topLevelDimensionsInternal 52 | |> Maybe.withDefault icon.size 53 | 54 | 55 | topLevelDimensionsInternal : Icon hasId -> ( Int, Int ) 56 | topLevelDimensionsInternal (Icon { icon, outer }) = 57 | outer 58 | |> Maybe.map topLevelDimensions 59 | |> Maybe.withDefault icon.size 60 | -------------------------------------------------------------------------------- /src/FontAwesome/Layering.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Layering exposing 2 | ( layers, text, textTransformed, counter 3 | , layersBottomLeft, layersBottomRight, layersTopLeft, layersTopRight 4 | ) 5 | 6 | {-| Layers are the way to place icons and text visually on top of each other. With this approach you can use more than 7 | two icons, use multiple colors, and layer text and/or counters onto an icon. 8 | 9 | [See the FontAwesome docs for details.](https://fontawesome.com/how-to-use/on-the-web/styling/layering) 10 | 11 | @docs layers, text, textTransformed, counter 12 | 13 | There are also some attributes to control positioning of counters. 14 | 15 | @docs layersBottomLeft, layersBottomRight, layersTopLeft, layersTopRight 16 | 17 | -} 18 | 19 | import FontAwesome.Transforms exposing (..) 20 | import FontAwesome.Transforms.Internal exposing (..) 21 | import Html exposing (Html) 22 | import Html.Attributes as HtmlA 23 | import Svg.Attributes as SvgA 24 | 25 | 26 | {-| Convenience function for producing layers of icons. 27 | -} 28 | layers : List (Html.Attribute msg) -> List (Html msg) -> Html msg 29 | layers attrs icons = 30 | Html.span (HtmlA.class "fa-layers fa-fw" :: attrs) icons 31 | 32 | 33 | {-| Add inside your `layers` element to put text on top of an icon. 34 | -} 35 | text : List (Html.Attribute msg) -> String -> Html msg 36 | text attrs str = 37 | textTransformed attrs [] str 38 | 39 | 40 | {-| Add inside your `layers` element to put text on top of an icon, applying the given transforms to it. 41 | -} 42 | textTransformed : List (Html.Attribute msg) -> List Transform -> String -> Html msg 43 | textTransformed attrs transforms str = 44 | let 45 | transform = 46 | transforms |> meaningfulTransform |> Maybe.map transformForCss |> Maybe.withDefault [] 47 | in 48 | Html.span 49 | (List.concat [ [ HtmlA.class "fa-layers-text", HtmlA.attribute "aria-hidden" "true" ], transform, attrs ]) 50 | [ Html.text str ] 51 | 52 | 53 | {-| Adds a counter to the top right of your icons. Can be positioned with `layersBottomLeft`, `layersBottomRight`, 54 | `layersTopLeft` and the default `layersTopRight`. Overflow text is truncated with an ellipsis. 55 | -} 56 | counter : List (Html.Attribute msg) -> String -> Html msg 57 | counter attrs count = 58 | Html.span (HtmlA.class "fa-layers-counter" :: attrs) [ Html.text count ] 59 | 60 | 61 | {-| Apply the `fa-layers-bottom-left` class to the element. 62 | -} 63 | layersBottomLeft : Html.Attribute msg 64 | layersBottomLeft = 65 | SvgA.class "fa-layers-bottom-left" 66 | 67 | 68 | {-| Apply the `fa-layers-bottom-right` class to the element. 69 | -} 70 | layersBottomRight : Html.Attribute msg 71 | layersBottomRight = 72 | SvgA.class "fa-layers-bottom-right" 73 | 74 | 75 | {-| Apply the `fa-layers-top-left` class to the element. 76 | -} 77 | layersTopLeft : Html.Attribute msg 78 | layersTopLeft = 79 | SvgA.class "fa-layers-top-left" 80 | 81 | 82 | {-| Apply the `fa-layers-top-right` class to the element. 83 | -} 84 | layersTopRight : Html.Attribute msg 85 | layersTopRight = 86 | SvgA.class "fa-layers-top-right" 87 | 88 | 89 | 90 | {- Private -} 91 | 92 | 93 | transformForCss : CombinedTransform -> List (Html.Attribute msg) 94 | transformForCss transform = 95 | let 96 | translate = 97 | "translate(calc(-50% + " ++ String.fromFloat (transform.x / baseSize) ++ "em), calc(-50% + " ++ String.fromFloat (transform.y / baseSize) ++ "em)) " 98 | 99 | flipX = 100 | if transform.flipX then 101 | -1 102 | 103 | else 104 | 1 105 | 106 | flipY = 107 | if transform.flipY then 108 | -1 109 | 110 | else 111 | 1 112 | 113 | scaleX = 114 | transform.size / baseSize * flipX 115 | 116 | scaleY = 117 | transform.size / baseSize * flipY 118 | 119 | scale = 120 | "scale(" ++ String.fromFloat scaleX ++ ", " ++ String.fromFloat scaleY ++ ") " 121 | 122 | rotate = 123 | "rotate(" ++ String.fromFloat transform.rotate ++ "deg)" 124 | in 125 | [ HtmlA.style "transform" (translate ++ scale ++ rotate) ] 126 | -------------------------------------------------------------------------------- /src/FontAwesome/Regular.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Regular exposing (trashCan, message, fileLines, calendarDays, handPointRight, faceSmileBeam, faceGrinStars, addressBook, comments, paste, faceGrinTongueSquint, faceFlushed, squareCaretRight, squareMinus, compass, squareCaretDown, faceKissBeam, lightbulb, flag, squareCheck, circleDot, faceDizzy, futbol, penToSquare, hourglassHalf, eyeSlash, hand, handSpock, faceKiss, faceGrinTongue, chessBishop, faceGrinWink, faceGrinWide, faceFrownOpen, handPointUp, bookmark, handPointDown, folder, user, squareCaretLeft, star, chessKnight, faceLaughSquint, faceLaugh, folderOpen, clipboard, chessQueen, handBackFist, squareCaretUp, chartBar, windowRestore, squarePlus, image, folderClosed, lemon, handshake, gem, circlePlay, circleCheck, circleStop, idBadge, faceLaughBeam, registered, addressCard, faceTired, fontAwesome, faceSmileWink, fileWord, filePowerpoint, envelopeOpen, fileZipper, square, snowflake, newspaper, faceKissWinkHeart, starHalfStroke, fileExcel, faceGrinBeam, objectUngroup, circleRight, faceRollingEyes, objectGroup, heart, faceSurprise, circlePause, circle, circleUp, fileAudio, fileImage, circleQuestion, faceMehBlank, eye, faceSadCry, fileCode, windowMaximize, faceFrown, floppyDisk, commentDots, faceGrinSquint, handPointer, handScissors, faceGrinTears, calendarXmark, fileVideo, filePdf, comment, envelope, hourglass, calendarCheck, hardDrive, faceGrinSquintTears, rectangleList, calendarPlus, circleLeft, moneyBill1, clock, keyboard, closedCaptioning, images, faceGrin, faceMeh, idCard, sun, faceLaughWink, circleDown, thumbsDown, chessPawn, creditCard, bell, file, hospital, chessRook, starHalf, chessKing, circleUser, copy, shareFromSquare, copyright, map, bellSlash, handLizard, faceSmile, handPeace, faceGrinHearts, building, faceGrinBeamSweat, moon, calendar, faceGrinTongueWink, clone, faceAngry, rectangleXmark, paperPlane, lifeRing, faceGrimace, calendarMinus, circleXmark, thumbsUp, windowMinimize, squareFull, noteSticky, faceSadTear, handPointLeft, trashAlt, commentAlt, fileAlt, fileText, calendarAlt, smileBeam, grinStars, contactBook, fileClipboard, grinTongueSquint, flushed, caretSquareRight, minusSquare, caretSquareDown, kissBeam, checkSquare, dotCircle, dizzy, futbolBall, soccerBall, edit, hourglass2, handPaper, kiss, grinTongue, grinWink, grinAlt, frownOpen, folderBlank, caretSquareLeft, laughSquint, laugh, handRock, caretSquareUp, barChart, plusSquare, playCircle, checkCircle, stopCircle, laughBeam, contactCard, vcard, tired, fontAwesomeFlag, fontAwesomeLogoFull, smileWink, fileArchive, kissWinkHeart, starHalfAlt, grinBeam, arrowAltCircleRight, mehRollingEyes, surprise, pauseCircle, arrowAltCircleUp, questionCircle, mehBlank, sadCry, frown, save, commenting, grinSquint, grinTears, calendarTimes, hourglassEmpty, hdd, grinSquintTears, listAlt, arrowAltCircleLeft, moneyBillAlt, clockFour, grin, meh, driversLicense, laughWink, arrowAltCircleDown, creditCardAlt, hospitalAlt, hospitalWide, userCircle, shareSquare, smile, grinHearts, grinBeamSweat, grinTongueWink, angry, rectangleTimes, timesRectangle, windowClose, grimace, timesCircle, xmarkCircle, stickyNote, sadTear) 2 | 3 | {-| Icons from the “Regular” pack. 4 | 5 | @docs trashCan, message, fileLines, calendarDays, handPointRight, faceSmileBeam, faceGrinStars, addressBook, comments, paste, faceGrinTongueSquint, faceFlushed, squareCaretRight, squareMinus, compass, squareCaretDown, faceKissBeam, lightbulb, flag, squareCheck, circleDot, faceDizzy, futbol, penToSquare, hourglassHalf, eyeSlash, hand, handSpock, faceKiss, faceGrinTongue, chessBishop, faceGrinWink, faceGrinWide, faceFrownOpen, handPointUp, bookmark, handPointDown, folder, user, squareCaretLeft, star, chessKnight, faceLaughSquint, faceLaugh, folderOpen, clipboard, chessQueen, handBackFist, squareCaretUp, chartBar, windowRestore, squarePlus, image, folderClosed, lemon, handshake, gem, circlePlay, circleCheck, circleStop, idBadge, faceLaughBeam, registered, addressCard, faceTired, fontAwesome, faceSmileWink, fileWord, filePowerpoint, envelopeOpen, fileZipper, square, snowflake, newspaper, faceKissWinkHeart, starHalfStroke, fileExcel, faceGrinBeam, objectUngroup, circleRight, faceRollingEyes, objectGroup, heart, faceSurprise, circlePause, circle, circleUp, fileAudio, fileImage, circleQuestion, faceMehBlank, eye, faceSadCry, fileCode, windowMaximize, faceFrown, floppyDisk, commentDots, faceGrinSquint, handPointer, handScissors, faceGrinTears, calendarXmark, fileVideo, filePdf, comment, envelope, hourglass, calendarCheck, hardDrive, faceGrinSquintTears, rectangleList, calendarPlus, circleLeft, moneyBill1, clock, keyboard, closedCaptioning, images, faceGrin, faceMeh, idCard, sun, faceLaughWink, circleDown, thumbsDown, chessPawn, creditCard, bell, file, hospital, chessRook, starHalf, chessKing, circleUser, copy, shareFromSquare, copyright, map, bellSlash, handLizard, faceSmile, handPeace, faceGrinHearts, building, faceGrinBeamSweat, moon, calendar, faceGrinTongueWink, clone, faceAngry, rectangleXmark, paperPlane, lifeRing, faceGrimace, calendarMinus, circleXmark, thumbsUp, windowMinimize, squareFull, noteSticky, faceSadTear, handPointLeft, trashAlt, commentAlt, fileAlt, fileText, calendarAlt, smileBeam, grinStars, contactBook, fileClipboard, grinTongueSquint, flushed, caretSquareRight, minusSquare, caretSquareDown, kissBeam, checkSquare, dotCircle, dizzy, futbolBall, soccerBall, edit, hourglass2, handPaper, kiss, grinTongue, grinWink, grinAlt, frownOpen, folderBlank, caretSquareLeft, laughSquint, laugh, handRock, caretSquareUp, barChart, plusSquare, playCircle, checkCircle, stopCircle, laughBeam, contactCard, vcard, tired, fontAwesomeFlag, fontAwesomeLogoFull, smileWink, fileArchive, kissWinkHeart, starHalfAlt, grinBeam, arrowAltCircleRight, mehRollingEyes, surprise, pauseCircle, arrowAltCircleUp, questionCircle, mehBlank, sadCry, frown, save, commenting, grinSquint, grinTears, calendarTimes, hourglassEmpty, hdd, grinSquintTears, listAlt, arrowAltCircleLeft, moneyBillAlt, clockFour, grin, meh, driversLicense, laughWink, arrowAltCircleDown, creditCardAlt, hospitalAlt, hospitalWide, userCircle, shareSquare, smile, grinHearts, grinBeamSweat, grinTongueWink, angry, rectangleTimes, timesRectangle, windowClose, grimace, timesCircle, xmarkCircle, stickyNote, sadTear 6 | 7 | -} 8 | 9 | import FontAwesome as Icon exposing (Icon) 10 | import FontAwesome.Regular.Definitions as Definitions 11 | 12 | 13 | {-| The [“trash-can”](https://fontawesome.com/icons/trash-can) icon. 14 | -} 15 | trashCan : Icon Icon.WithoutId 16 | trashCan = 17 | Icon.present Definitions.trashCan 18 | 19 | 20 | {-| Synonym for `trashCan`. 21 | -} 22 | trashAlt : Icon Icon.WithoutId 23 | trashAlt = 24 | trashCan 25 | 26 | 27 | {-| The [“message”](https://fontawesome.com/icons/message) icon. 28 | -} 29 | message : Icon Icon.WithoutId 30 | message = 31 | Icon.present Definitions.message 32 | 33 | 34 | {-| Synonym for `message`. 35 | -} 36 | commentAlt : Icon Icon.WithoutId 37 | commentAlt = 38 | message 39 | 40 | 41 | {-| The [“file-lines”](https://fontawesome.com/icons/file-lines) icon. 42 | -} 43 | fileLines : Icon Icon.WithoutId 44 | fileLines = 45 | Icon.present Definitions.fileLines 46 | 47 | 48 | {-| Synonym for `fileLines`. 49 | -} 50 | fileAlt : Icon Icon.WithoutId 51 | fileAlt = 52 | fileLines 53 | 54 | 55 | {-| Synonym for `fileLines`. 56 | -} 57 | fileText : Icon Icon.WithoutId 58 | fileText = 59 | fileLines 60 | 61 | 62 | {-| The [“calendar-days”](https://fontawesome.com/icons/calendar-days) icon. 63 | -} 64 | calendarDays : Icon Icon.WithoutId 65 | calendarDays = 66 | Icon.present Definitions.calendarDays 67 | 68 | 69 | {-| Synonym for `calendarDays`. 70 | -} 71 | calendarAlt : Icon Icon.WithoutId 72 | calendarAlt = 73 | calendarDays 74 | 75 | 76 | {-| The [“hand-point-right”](https://fontawesome.com/icons/hand-point-right) icon. 77 | -} 78 | handPointRight : Icon Icon.WithoutId 79 | handPointRight = 80 | Icon.present Definitions.handPointRight 81 | 82 | 83 | {-| The [“face-smile-beam”](https://fontawesome.com/icons/face-smile-beam) icon. 84 | -} 85 | faceSmileBeam : Icon Icon.WithoutId 86 | faceSmileBeam = 87 | Icon.present Definitions.faceSmileBeam 88 | 89 | 90 | {-| Synonym for `faceSmileBeam`. 91 | -} 92 | smileBeam : Icon Icon.WithoutId 93 | smileBeam = 94 | faceSmileBeam 95 | 96 | 97 | {-| The [“face-grin-stars”](https://fontawesome.com/icons/face-grin-stars) icon. 98 | -} 99 | faceGrinStars : Icon Icon.WithoutId 100 | faceGrinStars = 101 | Icon.present Definitions.faceGrinStars 102 | 103 | 104 | {-| Synonym for `faceGrinStars`. 105 | -} 106 | grinStars : Icon Icon.WithoutId 107 | grinStars = 108 | faceGrinStars 109 | 110 | 111 | {-| The [“address-book”](https://fontawesome.com/icons/address-book) icon. 112 | -} 113 | addressBook : Icon Icon.WithoutId 114 | addressBook = 115 | Icon.present Definitions.addressBook 116 | 117 | 118 | {-| Synonym for `addressBook`. 119 | -} 120 | contactBook : Icon Icon.WithoutId 121 | contactBook = 122 | addressBook 123 | 124 | 125 | {-| The [“comments”](https://fontawesome.com/icons/comments) icon. 126 | -} 127 | comments : Icon Icon.WithoutId 128 | comments = 129 | Icon.present Definitions.comments 130 | 131 | 132 | {-| The [“paste”](https://fontawesome.com/icons/paste) icon. 133 | -} 134 | paste : Icon Icon.WithoutId 135 | paste = 136 | Icon.present Definitions.paste 137 | 138 | 139 | {-| Synonym for `paste`. 140 | -} 141 | fileClipboard : Icon Icon.WithoutId 142 | fileClipboard = 143 | paste 144 | 145 | 146 | {-| The [“face-grin-tongue-squint”](https://fontawesome.com/icons/face-grin-tongue-squint) icon. 147 | -} 148 | faceGrinTongueSquint : Icon Icon.WithoutId 149 | faceGrinTongueSquint = 150 | Icon.present Definitions.faceGrinTongueSquint 151 | 152 | 153 | {-| Synonym for `faceGrinTongueSquint`. 154 | -} 155 | grinTongueSquint : Icon Icon.WithoutId 156 | grinTongueSquint = 157 | faceGrinTongueSquint 158 | 159 | 160 | {-| The [“face-flushed”](https://fontawesome.com/icons/face-flushed) icon. 161 | -} 162 | faceFlushed : Icon Icon.WithoutId 163 | faceFlushed = 164 | Icon.present Definitions.faceFlushed 165 | 166 | 167 | {-| Synonym for `faceFlushed`. 168 | -} 169 | flushed : Icon Icon.WithoutId 170 | flushed = 171 | faceFlushed 172 | 173 | 174 | {-| The [“square-caret-right”](https://fontawesome.com/icons/square-caret-right) icon. 175 | -} 176 | squareCaretRight : Icon Icon.WithoutId 177 | squareCaretRight = 178 | Icon.present Definitions.squareCaretRight 179 | 180 | 181 | {-| Synonym for `squareCaretRight`. 182 | -} 183 | caretSquareRight : Icon Icon.WithoutId 184 | caretSquareRight = 185 | squareCaretRight 186 | 187 | 188 | {-| The [“square-minus”](https://fontawesome.com/icons/square-minus) icon. 189 | -} 190 | squareMinus : Icon Icon.WithoutId 191 | squareMinus = 192 | Icon.present Definitions.squareMinus 193 | 194 | 195 | {-| Synonym for `squareMinus`. 196 | -} 197 | minusSquare : Icon Icon.WithoutId 198 | minusSquare = 199 | squareMinus 200 | 201 | 202 | {-| The [“compass”](https://fontawesome.com/icons/compass) icon. 203 | -} 204 | compass : Icon Icon.WithoutId 205 | compass = 206 | Icon.present Definitions.compass 207 | 208 | 209 | {-| The [“square-caret-down”](https://fontawesome.com/icons/square-caret-down) icon. 210 | -} 211 | squareCaretDown : Icon Icon.WithoutId 212 | squareCaretDown = 213 | Icon.present Definitions.squareCaretDown 214 | 215 | 216 | {-| Synonym for `squareCaretDown`. 217 | -} 218 | caretSquareDown : Icon Icon.WithoutId 219 | caretSquareDown = 220 | squareCaretDown 221 | 222 | 223 | {-| The [“face-kiss-beam”](https://fontawesome.com/icons/face-kiss-beam) icon. 224 | -} 225 | faceKissBeam : Icon Icon.WithoutId 226 | faceKissBeam = 227 | Icon.present Definitions.faceKissBeam 228 | 229 | 230 | {-| Synonym for `faceKissBeam`. 231 | -} 232 | kissBeam : Icon Icon.WithoutId 233 | kissBeam = 234 | faceKissBeam 235 | 236 | 237 | {-| The [“lightbulb”](https://fontawesome.com/icons/lightbulb) icon. 238 | -} 239 | lightbulb : Icon Icon.WithoutId 240 | lightbulb = 241 | Icon.present Definitions.lightbulb 242 | 243 | 244 | {-| The [“flag”](https://fontawesome.com/icons/flag) icon. 245 | -} 246 | flag : Icon Icon.WithoutId 247 | flag = 248 | Icon.present Definitions.flag 249 | 250 | 251 | {-| The [“square-check”](https://fontawesome.com/icons/square-check) icon. 252 | -} 253 | squareCheck : Icon Icon.WithoutId 254 | squareCheck = 255 | Icon.present Definitions.squareCheck 256 | 257 | 258 | {-| Synonym for `squareCheck`. 259 | -} 260 | checkSquare : Icon Icon.WithoutId 261 | checkSquare = 262 | squareCheck 263 | 264 | 265 | {-| The [“circle-dot”](https://fontawesome.com/icons/circle-dot) icon. 266 | -} 267 | circleDot : Icon Icon.WithoutId 268 | circleDot = 269 | Icon.present Definitions.circleDot 270 | 271 | 272 | {-| Synonym for `circleDot`. 273 | -} 274 | dotCircle : Icon Icon.WithoutId 275 | dotCircle = 276 | circleDot 277 | 278 | 279 | {-| The [“face-dizzy”](https://fontawesome.com/icons/face-dizzy) icon. 280 | -} 281 | faceDizzy : Icon Icon.WithoutId 282 | faceDizzy = 283 | Icon.present Definitions.faceDizzy 284 | 285 | 286 | {-| Synonym for `faceDizzy`. 287 | -} 288 | dizzy : Icon Icon.WithoutId 289 | dizzy = 290 | faceDizzy 291 | 292 | 293 | {-| The [“futbol”](https://fontawesome.com/icons/futbol) icon. 294 | -} 295 | futbol : Icon Icon.WithoutId 296 | futbol = 297 | Icon.present Definitions.futbol 298 | 299 | 300 | {-| Synonym for `futbol`. 301 | -} 302 | futbolBall : Icon Icon.WithoutId 303 | futbolBall = 304 | futbol 305 | 306 | 307 | {-| Synonym for `futbol`. 308 | -} 309 | soccerBall : Icon Icon.WithoutId 310 | soccerBall = 311 | futbol 312 | 313 | 314 | {-| The [“pen-to-square”](https://fontawesome.com/icons/pen-to-square) icon. 315 | -} 316 | penToSquare : Icon Icon.WithoutId 317 | penToSquare = 318 | Icon.present Definitions.penToSquare 319 | 320 | 321 | {-| Synonym for `penToSquare`. 322 | -} 323 | edit : Icon Icon.WithoutId 324 | edit = 325 | penToSquare 326 | 327 | 328 | {-| The [“hourglass-half”](https://fontawesome.com/icons/hourglass-half) icon. 329 | -} 330 | hourglassHalf : Icon Icon.WithoutId 331 | hourglassHalf = 332 | Icon.present Definitions.hourglassHalf 333 | 334 | 335 | {-| Synonym for `hourglassHalf`. 336 | -} 337 | hourglass2 : Icon Icon.WithoutId 338 | hourglass2 = 339 | hourglassHalf 340 | 341 | 342 | {-| The [“eye-slash”](https://fontawesome.com/icons/eye-slash) icon. 343 | -} 344 | eyeSlash : Icon Icon.WithoutId 345 | eyeSlash = 346 | Icon.present Definitions.eyeSlash 347 | 348 | 349 | {-| The [“hand”](https://fontawesome.com/icons/hand) icon. 350 | -} 351 | hand : Icon Icon.WithoutId 352 | hand = 353 | Icon.present Definitions.hand 354 | 355 | 356 | {-| Synonym for `hand`. 357 | -} 358 | handPaper : Icon Icon.WithoutId 359 | handPaper = 360 | hand 361 | 362 | 363 | {-| The [“hand-spock”](https://fontawesome.com/icons/hand-spock) icon. 364 | -} 365 | handSpock : Icon Icon.WithoutId 366 | handSpock = 367 | Icon.present Definitions.handSpock 368 | 369 | 370 | {-| The [“face-kiss”](https://fontawesome.com/icons/face-kiss) icon. 371 | -} 372 | faceKiss : Icon Icon.WithoutId 373 | faceKiss = 374 | Icon.present Definitions.faceKiss 375 | 376 | 377 | {-| Synonym for `faceKiss`. 378 | -} 379 | kiss : Icon Icon.WithoutId 380 | kiss = 381 | faceKiss 382 | 383 | 384 | {-| The [“face-grin-tongue”](https://fontawesome.com/icons/face-grin-tongue) icon. 385 | -} 386 | faceGrinTongue : Icon Icon.WithoutId 387 | faceGrinTongue = 388 | Icon.present Definitions.faceGrinTongue 389 | 390 | 391 | {-| Synonym for `faceGrinTongue`. 392 | -} 393 | grinTongue : Icon Icon.WithoutId 394 | grinTongue = 395 | faceGrinTongue 396 | 397 | 398 | {-| The [“chess-bishop”](https://fontawesome.com/icons/chess-bishop) icon. 399 | -} 400 | chessBishop : Icon Icon.WithoutId 401 | chessBishop = 402 | Icon.present Definitions.chessBishop 403 | 404 | 405 | {-| The [“face-grin-wink”](https://fontawesome.com/icons/face-grin-wink) icon. 406 | -} 407 | faceGrinWink : Icon Icon.WithoutId 408 | faceGrinWink = 409 | Icon.present Definitions.faceGrinWink 410 | 411 | 412 | {-| Synonym for `faceGrinWink`. 413 | -} 414 | grinWink : Icon Icon.WithoutId 415 | grinWink = 416 | faceGrinWink 417 | 418 | 419 | {-| The [“face-grin-wide”](https://fontawesome.com/icons/face-grin-wide) icon. 420 | -} 421 | faceGrinWide : Icon Icon.WithoutId 422 | faceGrinWide = 423 | Icon.present Definitions.faceGrinWide 424 | 425 | 426 | {-| Synonym for `faceGrinWide`. 427 | -} 428 | grinAlt : Icon Icon.WithoutId 429 | grinAlt = 430 | faceGrinWide 431 | 432 | 433 | {-| The [“face-frown-open”](https://fontawesome.com/icons/face-frown-open) icon. 434 | -} 435 | faceFrownOpen : Icon Icon.WithoutId 436 | faceFrownOpen = 437 | Icon.present Definitions.faceFrownOpen 438 | 439 | 440 | {-| Synonym for `faceFrownOpen`. 441 | -} 442 | frownOpen : Icon Icon.WithoutId 443 | frownOpen = 444 | faceFrownOpen 445 | 446 | 447 | {-| The [“hand-point-up”](https://fontawesome.com/icons/hand-point-up) icon. 448 | -} 449 | handPointUp : Icon Icon.WithoutId 450 | handPointUp = 451 | Icon.present Definitions.handPointUp 452 | 453 | 454 | {-| The [“bookmark”](https://fontawesome.com/icons/bookmark) icon. 455 | -} 456 | bookmark : Icon Icon.WithoutId 457 | bookmark = 458 | Icon.present Definitions.bookmark 459 | 460 | 461 | {-| The [“hand-point-down”](https://fontawesome.com/icons/hand-point-down) icon. 462 | -} 463 | handPointDown : Icon Icon.WithoutId 464 | handPointDown = 465 | Icon.present Definitions.handPointDown 466 | 467 | 468 | {-| The [“folder”](https://fontawesome.com/icons/folder) icon. 469 | -} 470 | folder : Icon Icon.WithoutId 471 | folder = 472 | Icon.present Definitions.folder 473 | 474 | 475 | {-| Synonym for `folder`. 476 | -} 477 | folderBlank : Icon Icon.WithoutId 478 | folderBlank = 479 | folder 480 | 481 | 482 | {-| The [“user”](https://fontawesome.com/icons/user) icon. 483 | -} 484 | user : Icon Icon.WithoutId 485 | user = 486 | Icon.present Definitions.user 487 | 488 | 489 | {-| The [“square-caret-left”](https://fontawesome.com/icons/square-caret-left) icon. 490 | -} 491 | squareCaretLeft : Icon Icon.WithoutId 492 | squareCaretLeft = 493 | Icon.present Definitions.squareCaretLeft 494 | 495 | 496 | {-| Synonym for `squareCaretLeft`. 497 | -} 498 | caretSquareLeft : Icon Icon.WithoutId 499 | caretSquareLeft = 500 | squareCaretLeft 501 | 502 | 503 | {-| The [“star”](https://fontawesome.com/icons/star) icon. 504 | -} 505 | star : Icon Icon.WithoutId 506 | star = 507 | Icon.present Definitions.star 508 | 509 | 510 | {-| The [“chess-knight”](https://fontawesome.com/icons/chess-knight) icon. 511 | -} 512 | chessKnight : Icon Icon.WithoutId 513 | chessKnight = 514 | Icon.present Definitions.chessKnight 515 | 516 | 517 | {-| The [“face-laugh-squint”](https://fontawesome.com/icons/face-laugh-squint) icon. 518 | -} 519 | faceLaughSquint : Icon Icon.WithoutId 520 | faceLaughSquint = 521 | Icon.present Definitions.faceLaughSquint 522 | 523 | 524 | {-| Synonym for `faceLaughSquint`. 525 | -} 526 | laughSquint : Icon Icon.WithoutId 527 | laughSquint = 528 | faceLaughSquint 529 | 530 | 531 | {-| The [“face-laugh”](https://fontawesome.com/icons/face-laugh) icon. 532 | -} 533 | faceLaugh : Icon Icon.WithoutId 534 | faceLaugh = 535 | Icon.present Definitions.faceLaugh 536 | 537 | 538 | {-| Synonym for `faceLaugh`. 539 | -} 540 | laugh : Icon Icon.WithoutId 541 | laugh = 542 | faceLaugh 543 | 544 | 545 | {-| The [“folder-open”](https://fontawesome.com/icons/folder-open) icon. 546 | -} 547 | folderOpen : Icon Icon.WithoutId 548 | folderOpen = 549 | Icon.present Definitions.folderOpen 550 | 551 | 552 | {-| The [“clipboard”](https://fontawesome.com/icons/clipboard) icon. 553 | -} 554 | clipboard : Icon Icon.WithoutId 555 | clipboard = 556 | Icon.present Definitions.clipboard 557 | 558 | 559 | {-| The [“chess-queen”](https://fontawesome.com/icons/chess-queen) icon. 560 | -} 561 | chessQueen : Icon Icon.WithoutId 562 | chessQueen = 563 | Icon.present Definitions.chessQueen 564 | 565 | 566 | {-| The [“hand-back-fist”](https://fontawesome.com/icons/hand-back-fist) icon. 567 | -} 568 | handBackFist : Icon Icon.WithoutId 569 | handBackFist = 570 | Icon.present Definitions.handBackFist 571 | 572 | 573 | {-| Synonym for `handBackFist`. 574 | -} 575 | handRock : Icon Icon.WithoutId 576 | handRock = 577 | handBackFist 578 | 579 | 580 | {-| The [“square-caret-up”](https://fontawesome.com/icons/square-caret-up) icon. 581 | -} 582 | squareCaretUp : Icon Icon.WithoutId 583 | squareCaretUp = 584 | Icon.present Definitions.squareCaretUp 585 | 586 | 587 | {-| Synonym for `squareCaretUp`. 588 | -} 589 | caretSquareUp : Icon Icon.WithoutId 590 | caretSquareUp = 591 | squareCaretUp 592 | 593 | 594 | {-| The [“chart-bar”](https://fontawesome.com/icons/chart-bar) icon. 595 | -} 596 | chartBar : Icon Icon.WithoutId 597 | chartBar = 598 | Icon.present Definitions.chartBar 599 | 600 | 601 | {-| Synonym for `chartBar`. 602 | -} 603 | barChart : Icon Icon.WithoutId 604 | barChart = 605 | chartBar 606 | 607 | 608 | {-| The [“window-restore”](https://fontawesome.com/icons/window-restore) icon. 609 | -} 610 | windowRestore : Icon Icon.WithoutId 611 | windowRestore = 612 | Icon.present Definitions.windowRestore 613 | 614 | 615 | {-| The [“square-plus”](https://fontawesome.com/icons/square-plus) icon. 616 | -} 617 | squarePlus : Icon Icon.WithoutId 618 | squarePlus = 619 | Icon.present Definitions.squarePlus 620 | 621 | 622 | {-| Synonym for `squarePlus`. 623 | -} 624 | plusSquare : Icon Icon.WithoutId 625 | plusSquare = 626 | squarePlus 627 | 628 | 629 | {-| The [“image”](https://fontawesome.com/icons/image) icon. 630 | -} 631 | image : Icon Icon.WithoutId 632 | image = 633 | Icon.present Definitions.image 634 | 635 | 636 | {-| The [“folder-closed”](https://fontawesome.com/icons/folder-closed) icon. 637 | -} 638 | folderClosed : Icon Icon.WithoutId 639 | folderClosed = 640 | Icon.present Definitions.folderClosed 641 | 642 | 643 | {-| The [“lemon”](https://fontawesome.com/icons/lemon) icon. 644 | -} 645 | lemon : Icon Icon.WithoutId 646 | lemon = 647 | Icon.present Definitions.lemon 648 | 649 | 650 | {-| The [“handshake”](https://fontawesome.com/icons/handshake) icon. 651 | -} 652 | handshake : Icon Icon.WithoutId 653 | handshake = 654 | Icon.present Definitions.handshake 655 | 656 | 657 | {-| The [“gem”](https://fontawesome.com/icons/gem) icon. 658 | -} 659 | gem : Icon Icon.WithoutId 660 | gem = 661 | Icon.present Definitions.gem 662 | 663 | 664 | {-| The [“circle-play”](https://fontawesome.com/icons/circle-play) icon. 665 | -} 666 | circlePlay : Icon Icon.WithoutId 667 | circlePlay = 668 | Icon.present Definitions.circlePlay 669 | 670 | 671 | {-| Synonym for `circlePlay`. 672 | -} 673 | playCircle : Icon Icon.WithoutId 674 | playCircle = 675 | circlePlay 676 | 677 | 678 | {-| The [“circle-check”](https://fontawesome.com/icons/circle-check) icon. 679 | -} 680 | circleCheck : Icon Icon.WithoutId 681 | circleCheck = 682 | Icon.present Definitions.circleCheck 683 | 684 | 685 | {-| Synonym for `circleCheck`. 686 | -} 687 | checkCircle : Icon Icon.WithoutId 688 | checkCircle = 689 | circleCheck 690 | 691 | 692 | {-| The [“circle-stop”](https://fontawesome.com/icons/circle-stop) icon. 693 | -} 694 | circleStop : Icon Icon.WithoutId 695 | circleStop = 696 | Icon.present Definitions.circleStop 697 | 698 | 699 | {-| Synonym for `circleStop`. 700 | -} 701 | stopCircle : Icon Icon.WithoutId 702 | stopCircle = 703 | circleStop 704 | 705 | 706 | {-| The [“id-badge”](https://fontawesome.com/icons/id-badge) icon. 707 | -} 708 | idBadge : Icon Icon.WithoutId 709 | idBadge = 710 | Icon.present Definitions.idBadge 711 | 712 | 713 | {-| The [“face-laugh-beam”](https://fontawesome.com/icons/face-laugh-beam) icon. 714 | -} 715 | faceLaughBeam : Icon Icon.WithoutId 716 | faceLaughBeam = 717 | Icon.present Definitions.faceLaughBeam 718 | 719 | 720 | {-| Synonym for `faceLaughBeam`. 721 | -} 722 | laughBeam : Icon Icon.WithoutId 723 | laughBeam = 724 | faceLaughBeam 725 | 726 | 727 | {-| The [“registered”](https://fontawesome.com/icons/registered) icon. 728 | -} 729 | registered : Icon Icon.WithoutId 730 | registered = 731 | Icon.present Definitions.registered 732 | 733 | 734 | {-| The [“address-card”](https://fontawesome.com/icons/address-card) icon. 735 | -} 736 | addressCard : Icon Icon.WithoutId 737 | addressCard = 738 | Icon.present Definitions.addressCard 739 | 740 | 741 | {-| Synonym for `addressCard`. 742 | -} 743 | contactCard : Icon Icon.WithoutId 744 | contactCard = 745 | addressCard 746 | 747 | 748 | {-| Synonym for `addressCard`. 749 | -} 750 | vcard : Icon Icon.WithoutId 751 | vcard = 752 | addressCard 753 | 754 | 755 | {-| The [“face-tired”](https://fontawesome.com/icons/face-tired) icon. 756 | -} 757 | faceTired : Icon Icon.WithoutId 758 | faceTired = 759 | Icon.present Definitions.faceTired 760 | 761 | 762 | {-| Synonym for `faceTired`. 763 | -} 764 | tired : Icon Icon.WithoutId 765 | tired = 766 | faceTired 767 | 768 | 769 | {-| The [“font-awesome”](https://fontawesome.com/icons/font-awesome) icon. 770 | -} 771 | fontAwesome : Icon Icon.WithoutId 772 | fontAwesome = 773 | Icon.present Definitions.fontAwesome 774 | 775 | 776 | {-| Synonym for `fontAwesome`. 777 | -} 778 | fontAwesomeFlag : Icon Icon.WithoutId 779 | fontAwesomeFlag = 780 | fontAwesome 781 | 782 | 783 | {-| Synonym for `fontAwesome`. 784 | -} 785 | fontAwesomeLogoFull : Icon Icon.WithoutId 786 | fontAwesomeLogoFull = 787 | fontAwesome 788 | 789 | 790 | {-| The [“face-smile-wink”](https://fontawesome.com/icons/face-smile-wink) icon. 791 | -} 792 | faceSmileWink : Icon Icon.WithoutId 793 | faceSmileWink = 794 | Icon.present Definitions.faceSmileWink 795 | 796 | 797 | {-| Synonym for `faceSmileWink`. 798 | -} 799 | smileWink : Icon Icon.WithoutId 800 | smileWink = 801 | faceSmileWink 802 | 803 | 804 | {-| The [“file-word”](https://fontawesome.com/icons/file-word) icon. 805 | -} 806 | fileWord : Icon Icon.WithoutId 807 | fileWord = 808 | Icon.present Definitions.fileWord 809 | 810 | 811 | {-| The [“file-powerpoint”](https://fontawesome.com/icons/file-powerpoint) icon. 812 | -} 813 | filePowerpoint : Icon Icon.WithoutId 814 | filePowerpoint = 815 | Icon.present Definitions.filePowerpoint 816 | 817 | 818 | {-| The [“envelope-open”](https://fontawesome.com/icons/envelope-open) icon. 819 | -} 820 | envelopeOpen : Icon Icon.WithoutId 821 | envelopeOpen = 822 | Icon.present Definitions.envelopeOpen 823 | 824 | 825 | {-| The [“file-zipper”](https://fontawesome.com/icons/file-zipper) icon. 826 | -} 827 | fileZipper : Icon Icon.WithoutId 828 | fileZipper = 829 | Icon.present Definitions.fileZipper 830 | 831 | 832 | {-| Synonym for `fileZipper`. 833 | -} 834 | fileArchive : Icon Icon.WithoutId 835 | fileArchive = 836 | fileZipper 837 | 838 | 839 | {-| The [“square”](https://fontawesome.com/icons/square) icon. 840 | -} 841 | square : Icon Icon.WithoutId 842 | square = 843 | Icon.present Definitions.square 844 | 845 | 846 | {-| The [“snowflake”](https://fontawesome.com/icons/snowflake) icon. 847 | -} 848 | snowflake : Icon Icon.WithoutId 849 | snowflake = 850 | Icon.present Definitions.snowflake 851 | 852 | 853 | {-| The [“newspaper”](https://fontawesome.com/icons/newspaper) icon. 854 | -} 855 | newspaper : Icon Icon.WithoutId 856 | newspaper = 857 | Icon.present Definitions.newspaper 858 | 859 | 860 | {-| The [“face-kiss-wink-heart”](https://fontawesome.com/icons/face-kiss-wink-heart) icon. 861 | -} 862 | faceKissWinkHeart : Icon Icon.WithoutId 863 | faceKissWinkHeart = 864 | Icon.present Definitions.faceKissWinkHeart 865 | 866 | 867 | {-| Synonym for `faceKissWinkHeart`. 868 | -} 869 | kissWinkHeart : Icon Icon.WithoutId 870 | kissWinkHeart = 871 | faceKissWinkHeart 872 | 873 | 874 | {-| The [“star-half-stroke”](https://fontawesome.com/icons/star-half-stroke) icon. 875 | -} 876 | starHalfStroke : Icon Icon.WithoutId 877 | starHalfStroke = 878 | Icon.present Definitions.starHalfStroke 879 | 880 | 881 | {-| Synonym for `starHalfStroke`. 882 | -} 883 | starHalfAlt : Icon Icon.WithoutId 884 | starHalfAlt = 885 | starHalfStroke 886 | 887 | 888 | {-| The [“file-excel”](https://fontawesome.com/icons/file-excel) icon. 889 | -} 890 | fileExcel : Icon Icon.WithoutId 891 | fileExcel = 892 | Icon.present Definitions.fileExcel 893 | 894 | 895 | {-| The [“face-grin-beam”](https://fontawesome.com/icons/face-grin-beam) icon. 896 | -} 897 | faceGrinBeam : Icon Icon.WithoutId 898 | faceGrinBeam = 899 | Icon.present Definitions.faceGrinBeam 900 | 901 | 902 | {-| Synonym for `faceGrinBeam`. 903 | -} 904 | grinBeam : Icon Icon.WithoutId 905 | grinBeam = 906 | faceGrinBeam 907 | 908 | 909 | {-| The [“object-ungroup”](https://fontawesome.com/icons/object-ungroup) icon. 910 | -} 911 | objectUngroup : Icon Icon.WithoutId 912 | objectUngroup = 913 | Icon.present Definitions.objectUngroup 914 | 915 | 916 | {-| The [“circle-right”](https://fontawesome.com/icons/circle-right) icon. 917 | -} 918 | circleRight : Icon Icon.WithoutId 919 | circleRight = 920 | Icon.present Definitions.circleRight 921 | 922 | 923 | {-| Synonym for `circleRight`. 924 | -} 925 | arrowAltCircleRight : Icon Icon.WithoutId 926 | arrowAltCircleRight = 927 | circleRight 928 | 929 | 930 | {-| The [“face-rolling-eyes”](https://fontawesome.com/icons/face-rolling-eyes) icon. 931 | -} 932 | faceRollingEyes : Icon Icon.WithoutId 933 | faceRollingEyes = 934 | Icon.present Definitions.faceRollingEyes 935 | 936 | 937 | {-| Synonym for `faceRollingEyes`. 938 | -} 939 | mehRollingEyes : Icon Icon.WithoutId 940 | mehRollingEyes = 941 | faceRollingEyes 942 | 943 | 944 | {-| The [“object-group”](https://fontawesome.com/icons/object-group) icon. 945 | -} 946 | objectGroup : Icon Icon.WithoutId 947 | objectGroup = 948 | Icon.present Definitions.objectGroup 949 | 950 | 951 | {-| The [“heart”](https://fontawesome.com/icons/heart) icon. 952 | -} 953 | heart : Icon Icon.WithoutId 954 | heart = 955 | Icon.present Definitions.heart 956 | 957 | 958 | {-| The [“face-surprise”](https://fontawesome.com/icons/face-surprise) icon. 959 | -} 960 | faceSurprise : Icon Icon.WithoutId 961 | faceSurprise = 962 | Icon.present Definitions.faceSurprise 963 | 964 | 965 | {-| Synonym for `faceSurprise`. 966 | -} 967 | surprise : Icon Icon.WithoutId 968 | surprise = 969 | faceSurprise 970 | 971 | 972 | {-| The [“circle-pause”](https://fontawesome.com/icons/circle-pause) icon. 973 | -} 974 | circlePause : Icon Icon.WithoutId 975 | circlePause = 976 | Icon.present Definitions.circlePause 977 | 978 | 979 | {-| Synonym for `circlePause`. 980 | -} 981 | pauseCircle : Icon Icon.WithoutId 982 | pauseCircle = 983 | circlePause 984 | 985 | 986 | {-| The [“circle”](https://fontawesome.com/icons/circle) icon. 987 | -} 988 | circle : Icon Icon.WithoutId 989 | circle = 990 | Icon.present Definitions.circle 991 | 992 | 993 | {-| The [“circle-up”](https://fontawesome.com/icons/circle-up) icon. 994 | -} 995 | circleUp : Icon Icon.WithoutId 996 | circleUp = 997 | Icon.present Definitions.circleUp 998 | 999 | 1000 | {-| Synonym for `circleUp`. 1001 | -} 1002 | arrowAltCircleUp : Icon Icon.WithoutId 1003 | arrowAltCircleUp = 1004 | circleUp 1005 | 1006 | 1007 | {-| The [“file-audio”](https://fontawesome.com/icons/file-audio) icon. 1008 | -} 1009 | fileAudio : Icon Icon.WithoutId 1010 | fileAudio = 1011 | Icon.present Definitions.fileAudio 1012 | 1013 | 1014 | {-| The [“file-image”](https://fontawesome.com/icons/file-image) icon. 1015 | -} 1016 | fileImage : Icon Icon.WithoutId 1017 | fileImage = 1018 | Icon.present Definitions.fileImage 1019 | 1020 | 1021 | {-| The [“circle-question”](https://fontawesome.com/icons/circle-question) icon. 1022 | -} 1023 | circleQuestion : Icon Icon.WithoutId 1024 | circleQuestion = 1025 | Icon.present Definitions.circleQuestion 1026 | 1027 | 1028 | {-| Synonym for `circleQuestion`. 1029 | -} 1030 | questionCircle : Icon Icon.WithoutId 1031 | questionCircle = 1032 | circleQuestion 1033 | 1034 | 1035 | {-| The [“face-meh-blank”](https://fontawesome.com/icons/face-meh-blank) icon. 1036 | -} 1037 | faceMehBlank : Icon Icon.WithoutId 1038 | faceMehBlank = 1039 | Icon.present Definitions.faceMehBlank 1040 | 1041 | 1042 | {-| Synonym for `faceMehBlank`. 1043 | -} 1044 | mehBlank : Icon Icon.WithoutId 1045 | mehBlank = 1046 | faceMehBlank 1047 | 1048 | 1049 | {-| The [“eye”](https://fontawesome.com/icons/eye) icon. 1050 | -} 1051 | eye : Icon Icon.WithoutId 1052 | eye = 1053 | Icon.present Definitions.eye 1054 | 1055 | 1056 | {-| The [“face-sad-cry”](https://fontawesome.com/icons/face-sad-cry) icon. 1057 | -} 1058 | faceSadCry : Icon Icon.WithoutId 1059 | faceSadCry = 1060 | Icon.present Definitions.faceSadCry 1061 | 1062 | 1063 | {-| Synonym for `faceSadCry`. 1064 | -} 1065 | sadCry : Icon Icon.WithoutId 1066 | sadCry = 1067 | faceSadCry 1068 | 1069 | 1070 | {-| The [“file-code”](https://fontawesome.com/icons/file-code) icon. 1071 | -} 1072 | fileCode : Icon Icon.WithoutId 1073 | fileCode = 1074 | Icon.present Definitions.fileCode 1075 | 1076 | 1077 | {-| The [“window-maximize”](https://fontawesome.com/icons/window-maximize) icon. 1078 | -} 1079 | windowMaximize : Icon Icon.WithoutId 1080 | windowMaximize = 1081 | Icon.present Definitions.windowMaximize 1082 | 1083 | 1084 | {-| The [“face-frown”](https://fontawesome.com/icons/face-frown) icon. 1085 | -} 1086 | faceFrown : Icon Icon.WithoutId 1087 | faceFrown = 1088 | Icon.present Definitions.faceFrown 1089 | 1090 | 1091 | {-| Synonym for `faceFrown`. 1092 | -} 1093 | frown : Icon Icon.WithoutId 1094 | frown = 1095 | faceFrown 1096 | 1097 | 1098 | {-| The [“floppy-disk”](https://fontawesome.com/icons/floppy-disk) icon. 1099 | -} 1100 | floppyDisk : Icon Icon.WithoutId 1101 | floppyDisk = 1102 | Icon.present Definitions.floppyDisk 1103 | 1104 | 1105 | {-| Synonym for `floppyDisk`. 1106 | -} 1107 | save : Icon Icon.WithoutId 1108 | save = 1109 | floppyDisk 1110 | 1111 | 1112 | {-| The [“comment-dots”](https://fontawesome.com/icons/comment-dots) icon. 1113 | -} 1114 | commentDots : Icon Icon.WithoutId 1115 | commentDots = 1116 | Icon.present Definitions.commentDots 1117 | 1118 | 1119 | {-| Synonym for `commentDots`. 1120 | -} 1121 | commenting : Icon Icon.WithoutId 1122 | commenting = 1123 | commentDots 1124 | 1125 | 1126 | {-| The [“face-grin-squint”](https://fontawesome.com/icons/face-grin-squint) icon. 1127 | -} 1128 | faceGrinSquint : Icon Icon.WithoutId 1129 | faceGrinSquint = 1130 | Icon.present Definitions.faceGrinSquint 1131 | 1132 | 1133 | {-| Synonym for `faceGrinSquint`. 1134 | -} 1135 | grinSquint : Icon Icon.WithoutId 1136 | grinSquint = 1137 | faceGrinSquint 1138 | 1139 | 1140 | {-| The [“hand-pointer”](https://fontawesome.com/icons/hand-pointer) icon. 1141 | -} 1142 | handPointer : Icon Icon.WithoutId 1143 | handPointer = 1144 | Icon.present Definitions.handPointer 1145 | 1146 | 1147 | {-| The [“hand-scissors”](https://fontawesome.com/icons/hand-scissors) icon. 1148 | -} 1149 | handScissors : Icon Icon.WithoutId 1150 | handScissors = 1151 | Icon.present Definitions.handScissors 1152 | 1153 | 1154 | {-| The [“face-grin-tears”](https://fontawesome.com/icons/face-grin-tears) icon. 1155 | -} 1156 | faceGrinTears : Icon Icon.WithoutId 1157 | faceGrinTears = 1158 | Icon.present Definitions.faceGrinTears 1159 | 1160 | 1161 | {-| Synonym for `faceGrinTears`. 1162 | -} 1163 | grinTears : Icon Icon.WithoutId 1164 | grinTears = 1165 | faceGrinTears 1166 | 1167 | 1168 | {-| The [“calendar-xmark”](https://fontawesome.com/icons/calendar-xmark) icon. 1169 | -} 1170 | calendarXmark : Icon Icon.WithoutId 1171 | calendarXmark = 1172 | Icon.present Definitions.calendarXmark 1173 | 1174 | 1175 | {-| Synonym for `calendarXmark`. 1176 | -} 1177 | calendarTimes : Icon Icon.WithoutId 1178 | calendarTimes = 1179 | calendarXmark 1180 | 1181 | 1182 | {-| The [“file-video”](https://fontawesome.com/icons/file-video) icon. 1183 | -} 1184 | fileVideo : Icon Icon.WithoutId 1185 | fileVideo = 1186 | Icon.present Definitions.fileVideo 1187 | 1188 | 1189 | {-| The [“file-pdf”](https://fontawesome.com/icons/file-pdf) icon. 1190 | -} 1191 | filePdf : Icon Icon.WithoutId 1192 | filePdf = 1193 | Icon.present Definitions.filePdf 1194 | 1195 | 1196 | {-| The [“comment”](https://fontawesome.com/icons/comment) icon. 1197 | -} 1198 | comment : Icon Icon.WithoutId 1199 | comment = 1200 | Icon.present Definitions.comment 1201 | 1202 | 1203 | {-| The [“envelope”](https://fontawesome.com/icons/envelope) icon. 1204 | -} 1205 | envelope : Icon Icon.WithoutId 1206 | envelope = 1207 | Icon.present Definitions.envelope 1208 | 1209 | 1210 | {-| The [“hourglass”](https://fontawesome.com/icons/hourglass) icon. 1211 | -} 1212 | hourglass : Icon Icon.WithoutId 1213 | hourglass = 1214 | Icon.present Definitions.hourglass 1215 | 1216 | 1217 | {-| Synonym for `hourglass`. 1218 | -} 1219 | hourglassEmpty : Icon Icon.WithoutId 1220 | hourglassEmpty = 1221 | hourglass 1222 | 1223 | 1224 | {-| The [“calendar-check”](https://fontawesome.com/icons/calendar-check) icon. 1225 | -} 1226 | calendarCheck : Icon Icon.WithoutId 1227 | calendarCheck = 1228 | Icon.present Definitions.calendarCheck 1229 | 1230 | 1231 | {-| The [“hard-drive”](https://fontawesome.com/icons/hard-drive) icon. 1232 | -} 1233 | hardDrive : Icon Icon.WithoutId 1234 | hardDrive = 1235 | Icon.present Definitions.hardDrive 1236 | 1237 | 1238 | {-| Synonym for `hardDrive`. 1239 | -} 1240 | hdd : Icon Icon.WithoutId 1241 | hdd = 1242 | hardDrive 1243 | 1244 | 1245 | {-| The [“face-grin-squint-tears”](https://fontawesome.com/icons/face-grin-squint-tears) icon. 1246 | -} 1247 | faceGrinSquintTears : Icon Icon.WithoutId 1248 | faceGrinSquintTears = 1249 | Icon.present Definitions.faceGrinSquintTears 1250 | 1251 | 1252 | {-| Synonym for `faceGrinSquintTears`. 1253 | -} 1254 | grinSquintTears : Icon Icon.WithoutId 1255 | grinSquintTears = 1256 | faceGrinSquintTears 1257 | 1258 | 1259 | {-| The [“rectangle-list”](https://fontawesome.com/icons/rectangle-list) icon. 1260 | -} 1261 | rectangleList : Icon Icon.WithoutId 1262 | rectangleList = 1263 | Icon.present Definitions.rectangleList 1264 | 1265 | 1266 | {-| Synonym for `rectangleList`. 1267 | -} 1268 | listAlt : Icon Icon.WithoutId 1269 | listAlt = 1270 | rectangleList 1271 | 1272 | 1273 | {-| The [“calendar-plus”](https://fontawesome.com/icons/calendar-plus) icon. 1274 | -} 1275 | calendarPlus : Icon Icon.WithoutId 1276 | calendarPlus = 1277 | Icon.present Definitions.calendarPlus 1278 | 1279 | 1280 | {-| The [“circle-left”](https://fontawesome.com/icons/circle-left) icon. 1281 | -} 1282 | circleLeft : Icon Icon.WithoutId 1283 | circleLeft = 1284 | Icon.present Definitions.circleLeft 1285 | 1286 | 1287 | {-| Synonym for `circleLeft`. 1288 | -} 1289 | arrowAltCircleLeft : Icon Icon.WithoutId 1290 | arrowAltCircleLeft = 1291 | circleLeft 1292 | 1293 | 1294 | {-| The [“money-bill-1”](https://fontawesome.com/icons/money-bill-1) icon. 1295 | -} 1296 | moneyBill1 : Icon Icon.WithoutId 1297 | moneyBill1 = 1298 | Icon.present Definitions.moneyBill1 1299 | 1300 | 1301 | {-| Synonym for `moneyBill1`. 1302 | -} 1303 | moneyBillAlt : Icon Icon.WithoutId 1304 | moneyBillAlt = 1305 | moneyBill1 1306 | 1307 | 1308 | {-| The [“clock”](https://fontawesome.com/icons/clock) icon. 1309 | -} 1310 | clock : Icon Icon.WithoutId 1311 | clock = 1312 | Icon.present Definitions.clock 1313 | 1314 | 1315 | {-| Synonym for `clock`. 1316 | -} 1317 | clockFour : Icon Icon.WithoutId 1318 | clockFour = 1319 | clock 1320 | 1321 | 1322 | {-| The [“keyboard”](https://fontawesome.com/icons/keyboard) icon. 1323 | -} 1324 | keyboard : Icon Icon.WithoutId 1325 | keyboard = 1326 | Icon.present Definitions.keyboard 1327 | 1328 | 1329 | {-| The [“closed-captioning”](https://fontawesome.com/icons/closed-captioning) icon. 1330 | -} 1331 | closedCaptioning : Icon Icon.WithoutId 1332 | closedCaptioning = 1333 | Icon.present Definitions.closedCaptioning 1334 | 1335 | 1336 | {-| The [“images”](https://fontawesome.com/icons/images) icon. 1337 | -} 1338 | images : Icon Icon.WithoutId 1339 | images = 1340 | Icon.present Definitions.images 1341 | 1342 | 1343 | {-| The [“face-grin”](https://fontawesome.com/icons/face-grin) icon. 1344 | -} 1345 | faceGrin : Icon Icon.WithoutId 1346 | faceGrin = 1347 | Icon.present Definitions.faceGrin 1348 | 1349 | 1350 | {-| Synonym for `faceGrin`. 1351 | -} 1352 | grin : Icon Icon.WithoutId 1353 | grin = 1354 | faceGrin 1355 | 1356 | 1357 | {-| The [“face-meh”](https://fontawesome.com/icons/face-meh) icon. 1358 | -} 1359 | faceMeh : Icon Icon.WithoutId 1360 | faceMeh = 1361 | Icon.present Definitions.faceMeh 1362 | 1363 | 1364 | {-| Synonym for `faceMeh`. 1365 | -} 1366 | meh : Icon Icon.WithoutId 1367 | meh = 1368 | faceMeh 1369 | 1370 | 1371 | {-| The [“id-card”](https://fontawesome.com/icons/id-card) icon. 1372 | -} 1373 | idCard : Icon Icon.WithoutId 1374 | idCard = 1375 | Icon.present Definitions.idCard 1376 | 1377 | 1378 | {-| Synonym for `idCard`. 1379 | -} 1380 | driversLicense : Icon Icon.WithoutId 1381 | driversLicense = 1382 | idCard 1383 | 1384 | 1385 | {-| The [“sun”](https://fontawesome.com/icons/sun) icon. 1386 | -} 1387 | sun : Icon Icon.WithoutId 1388 | sun = 1389 | Icon.present Definitions.sun 1390 | 1391 | 1392 | {-| The [“face-laugh-wink”](https://fontawesome.com/icons/face-laugh-wink) icon. 1393 | -} 1394 | faceLaughWink : Icon Icon.WithoutId 1395 | faceLaughWink = 1396 | Icon.present Definitions.faceLaughWink 1397 | 1398 | 1399 | {-| Synonym for `faceLaughWink`. 1400 | -} 1401 | laughWink : Icon Icon.WithoutId 1402 | laughWink = 1403 | faceLaughWink 1404 | 1405 | 1406 | {-| The [“circle-down”](https://fontawesome.com/icons/circle-down) icon. 1407 | -} 1408 | circleDown : Icon Icon.WithoutId 1409 | circleDown = 1410 | Icon.present Definitions.circleDown 1411 | 1412 | 1413 | {-| Synonym for `circleDown`. 1414 | -} 1415 | arrowAltCircleDown : Icon Icon.WithoutId 1416 | arrowAltCircleDown = 1417 | circleDown 1418 | 1419 | 1420 | {-| The [“thumbs-down”](https://fontawesome.com/icons/thumbs-down) icon. 1421 | -} 1422 | thumbsDown : Icon Icon.WithoutId 1423 | thumbsDown = 1424 | Icon.present Definitions.thumbsDown 1425 | 1426 | 1427 | {-| The [“chess-pawn”](https://fontawesome.com/icons/chess-pawn) icon. 1428 | -} 1429 | chessPawn : Icon Icon.WithoutId 1430 | chessPawn = 1431 | Icon.present Definitions.chessPawn 1432 | 1433 | 1434 | {-| The [“credit-card”](https://fontawesome.com/icons/credit-card) icon. 1435 | -} 1436 | creditCard : Icon Icon.WithoutId 1437 | creditCard = 1438 | Icon.present Definitions.creditCard 1439 | 1440 | 1441 | {-| Synonym for `creditCard`. 1442 | -} 1443 | creditCardAlt : Icon Icon.WithoutId 1444 | creditCardAlt = 1445 | creditCard 1446 | 1447 | 1448 | {-| The [“bell”](https://fontawesome.com/icons/bell) icon. 1449 | -} 1450 | bell : Icon Icon.WithoutId 1451 | bell = 1452 | Icon.present Definitions.bell 1453 | 1454 | 1455 | {-| The [“file”](https://fontawesome.com/icons/file) icon. 1456 | -} 1457 | file : Icon Icon.WithoutId 1458 | file = 1459 | Icon.present Definitions.file 1460 | 1461 | 1462 | {-| The [“hospital”](https://fontawesome.com/icons/hospital) icon. 1463 | -} 1464 | hospital : Icon Icon.WithoutId 1465 | hospital = 1466 | Icon.present Definitions.hospital 1467 | 1468 | 1469 | {-| Synonym for `hospital`. 1470 | -} 1471 | hospitalAlt : Icon Icon.WithoutId 1472 | hospitalAlt = 1473 | hospital 1474 | 1475 | 1476 | {-| Synonym for `hospital`. 1477 | -} 1478 | hospitalWide : Icon Icon.WithoutId 1479 | hospitalWide = 1480 | hospital 1481 | 1482 | 1483 | {-| The [“chess-rook”](https://fontawesome.com/icons/chess-rook) icon. 1484 | -} 1485 | chessRook : Icon Icon.WithoutId 1486 | chessRook = 1487 | Icon.present Definitions.chessRook 1488 | 1489 | 1490 | {-| The [“star-half”](https://fontawesome.com/icons/star-half) icon. 1491 | -} 1492 | starHalf : Icon Icon.WithoutId 1493 | starHalf = 1494 | Icon.present Definitions.starHalf 1495 | 1496 | 1497 | {-| The [“chess-king”](https://fontawesome.com/icons/chess-king) icon. 1498 | -} 1499 | chessKing : Icon Icon.WithoutId 1500 | chessKing = 1501 | Icon.present Definitions.chessKing 1502 | 1503 | 1504 | {-| The [“circle-user”](https://fontawesome.com/icons/circle-user) icon. 1505 | -} 1506 | circleUser : Icon Icon.WithoutId 1507 | circleUser = 1508 | Icon.present Definitions.circleUser 1509 | 1510 | 1511 | {-| Synonym for `circleUser`. 1512 | -} 1513 | userCircle : Icon Icon.WithoutId 1514 | userCircle = 1515 | circleUser 1516 | 1517 | 1518 | {-| The [“copy”](https://fontawesome.com/icons/copy) icon. 1519 | -} 1520 | copy : Icon Icon.WithoutId 1521 | copy = 1522 | Icon.present Definitions.copy 1523 | 1524 | 1525 | {-| The [“share-from-square”](https://fontawesome.com/icons/share-from-square) icon. 1526 | -} 1527 | shareFromSquare : Icon Icon.WithoutId 1528 | shareFromSquare = 1529 | Icon.present Definitions.shareFromSquare 1530 | 1531 | 1532 | {-| Synonym for `shareFromSquare`. 1533 | -} 1534 | shareSquare : Icon Icon.WithoutId 1535 | shareSquare = 1536 | shareFromSquare 1537 | 1538 | 1539 | {-| The [“copyright”](https://fontawesome.com/icons/copyright) icon. 1540 | -} 1541 | copyright : Icon Icon.WithoutId 1542 | copyright = 1543 | Icon.present Definitions.copyright 1544 | 1545 | 1546 | {-| The [“map”](https://fontawesome.com/icons/map) icon. 1547 | -} 1548 | map : Icon Icon.WithoutId 1549 | map = 1550 | Icon.present Definitions.map 1551 | 1552 | 1553 | {-| The [“bell-slash”](https://fontawesome.com/icons/bell-slash) icon. 1554 | -} 1555 | bellSlash : Icon Icon.WithoutId 1556 | bellSlash = 1557 | Icon.present Definitions.bellSlash 1558 | 1559 | 1560 | {-| The [“hand-lizard”](https://fontawesome.com/icons/hand-lizard) icon. 1561 | -} 1562 | handLizard : Icon Icon.WithoutId 1563 | handLizard = 1564 | Icon.present Definitions.handLizard 1565 | 1566 | 1567 | {-| The [“face-smile”](https://fontawesome.com/icons/face-smile) icon. 1568 | -} 1569 | faceSmile : Icon Icon.WithoutId 1570 | faceSmile = 1571 | Icon.present Definitions.faceSmile 1572 | 1573 | 1574 | {-| Synonym for `faceSmile`. 1575 | -} 1576 | smile : Icon Icon.WithoutId 1577 | smile = 1578 | faceSmile 1579 | 1580 | 1581 | {-| The [“hand-peace”](https://fontawesome.com/icons/hand-peace) icon. 1582 | -} 1583 | handPeace : Icon Icon.WithoutId 1584 | handPeace = 1585 | Icon.present Definitions.handPeace 1586 | 1587 | 1588 | {-| The [“face-grin-hearts”](https://fontawesome.com/icons/face-grin-hearts) icon. 1589 | -} 1590 | faceGrinHearts : Icon Icon.WithoutId 1591 | faceGrinHearts = 1592 | Icon.present Definitions.faceGrinHearts 1593 | 1594 | 1595 | {-| Synonym for `faceGrinHearts`. 1596 | -} 1597 | grinHearts : Icon Icon.WithoutId 1598 | grinHearts = 1599 | faceGrinHearts 1600 | 1601 | 1602 | {-| The [“building”](https://fontawesome.com/icons/building) icon. 1603 | -} 1604 | building : Icon Icon.WithoutId 1605 | building = 1606 | Icon.present Definitions.building 1607 | 1608 | 1609 | {-| The [“face-grin-beam-sweat”](https://fontawesome.com/icons/face-grin-beam-sweat) icon. 1610 | -} 1611 | faceGrinBeamSweat : Icon Icon.WithoutId 1612 | faceGrinBeamSweat = 1613 | Icon.present Definitions.faceGrinBeamSweat 1614 | 1615 | 1616 | {-| Synonym for `faceGrinBeamSweat`. 1617 | -} 1618 | grinBeamSweat : Icon Icon.WithoutId 1619 | grinBeamSweat = 1620 | faceGrinBeamSweat 1621 | 1622 | 1623 | {-| The [“moon”](https://fontawesome.com/icons/moon) icon. 1624 | -} 1625 | moon : Icon Icon.WithoutId 1626 | moon = 1627 | Icon.present Definitions.moon 1628 | 1629 | 1630 | {-| The [“calendar”](https://fontawesome.com/icons/calendar) icon. 1631 | -} 1632 | calendar : Icon Icon.WithoutId 1633 | calendar = 1634 | Icon.present Definitions.calendar 1635 | 1636 | 1637 | {-| The [“face-grin-tongue-wink”](https://fontawesome.com/icons/face-grin-tongue-wink) icon. 1638 | -} 1639 | faceGrinTongueWink : Icon Icon.WithoutId 1640 | faceGrinTongueWink = 1641 | Icon.present Definitions.faceGrinTongueWink 1642 | 1643 | 1644 | {-| Synonym for `faceGrinTongueWink`. 1645 | -} 1646 | grinTongueWink : Icon Icon.WithoutId 1647 | grinTongueWink = 1648 | faceGrinTongueWink 1649 | 1650 | 1651 | {-| The [“clone”](https://fontawesome.com/icons/clone) icon. 1652 | -} 1653 | clone : Icon Icon.WithoutId 1654 | clone = 1655 | Icon.present Definitions.clone 1656 | 1657 | 1658 | {-| The [“face-angry”](https://fontawesome.com/icons/face-angry) icon. 1659 | -} 1660 | faceAngry : Icon Icon.WithoutId 1661 | faceAngry = 1662 | Icon.present Definitions.faceAngry 1663 | 1664 | 1665 | {-| Synonym for `faceAngry`. 1666 | -} 1667 | angry : Icon Icon.WithoutId 1668 | angry = 1669 | faceAngry 1670 | 1671 | 1672 | {-| The [“rectangle-xmark”](https://fontawesome.com/icons/rectangle-xmark) icon. 1673 | -} 1674 | rectangleXmark : Icon Icon.WithoutId 1675 | rectangleXmark = 1676 | Icon.present Definitions.rectangleXmark 1677 | 1678 | 1679 | {-| Synonym for `rectangleXmark`. 1680 | -} 1681 | rectangleTimes : Icon Icon.WithoutId 1682 | rectangleTimes = 1683 | rectangleXmark 1684 | 1685 | 1686 | {-| Synonym for `rectangleXmark`. 1687 | -} 1688 | timesRectangle : Icon Icon.WithoutId 1689 | timesRectangle = 1690 | rectangleXmark 1691 | 1692 | 1693 | {-| Synonym for `rectangleXmark`. 1694 | -} 1695 | windowClose : Icon Icon.WithoutId 1696 | windowClose = 1697 | rectangleXmark 1698 | 1699 | 1700 | {-| The [“paper-plane”](https://fontawesome.com/icons/paper-plane) icon. 1701 | -} 1702 | paperPlane : Icon Icon.WithoutId 1703 | paperPlane = 1704 | Icon.present Definitions.paperPlane 1705 | 1706 | 1707 | {-| The [“life-ring”](https://fontawesome.com/icons/life-ring) icon. 1708 | -} 1709 | lifeRing : Icon Icon.WithoutId 1710 | lifeRing = 1711 | Icon.present Definitions.lifeRing 1712 | 1713 | 1714 | {-| The [“face-grimace”](https://fontawesome.com/icons/face-grimace) icon. 1715 | -} 1716 | faceGrimace : Icon Icon.WithoutId 1717 | faceGrimace = 1718 | Icon.present Definitions.faceGrimace 1719 | 1720 | 1721 | {-| Synonym for `faceGrimace`. 1722 | -} 1723 | grimace : Icon Icon.WithoutId 1724 | grimace = 1725 | faceGrimace 1726 | 1727 | 1728 | {-| The [“calendar-minus”](https://fontawesome.com/icons/calendar-minus) icon. 1729 | -} 1730 | calendarMinus : Icon Icon.WithoutId 1731 | calendarMinus = 1732 | Icon.present Definitions.calendarMinus 1733 | 1734 | 1735 | {-| The [“circle-xmark”](https://fontawesome.com/icons/circle-xmark) icon. 1736 | -} 1737 | circleXmark : Icon Icon.WithoutId 1738 | circleXmark = 1739 | Icon.present Definitions.circleXmark 1740 | 1741 | 1742 | {-| Synonym for `circleXmark`. 1743 | -} 1744 | timesCircle : Icon Icon.WithoutId 1745 | timesCircle = 1746 | circleXmark 1747 | 1748 | 1749 | {-| Synonym for `circleXmark`. 1750 | -} 1751 | xmarkCircle : Icon Icon.WithoutId 1752 | xmarkCircle = 1753 | circleXmark 1754 | 1755 | 1756 | {-| The [“thumbs-up”](https://fontawesome.com/icons/thumbs-up) icon. 1757 | -} 1758 | thumbsUp : Icon Icon.WithoutId 1759 | thumbsUp = 1760 | Icon.present Definitions.thumbsUp 1761 | 1762 | 1763 | {-| The [“window-minimize”](https://fontawesome.com/icons/window-minimize) icon. 1764 | -} 1765 | windowMinimize : Icon Icon.WithoutId 1766 | windowMinimize = 1767 | Icon.present Definitions.windowMinimize 1768 | 1769 | 1770 | {-| The [“square-full”](https://fontawesome.com/icons/square-full) icon. 1771 | -} 1772 | squareFull : Icon Icon.WithoutId 1773 | squareFull = 1774 | Icon.present Definitions.squareFull 1775 | 1776 | 1777 | {-| The [“note-sticky”](https://fontawesome.com/icons/note-sticky) icon. 1778 | -} 1779 | noteSticky : Icon Icon.WithoutId 1780 | noteSticky = 1781 | Icon.present Definitions.noteSticky 1782 | 1783 | 1784 | {-| Synonym for `noteSticky`. 1785 | -} 1786 | stickyNote : Icon Icon.WithoutId 1787 | stickyNote = 1788 | noteSticky 1789 | 1790 | 1791 | {-| The [“face-sad-tear”](https://fontawesome.com/icons/face-sad-tear) icon. 1792 | -} 1793 | faceSadTear : Icon Icon.WithoutId 1794 | faceSadTear = 1795 | Icon.present Definitions.faceSadTear 1796 | 1797 | 1798 | {-| Synonym for `faceSadTear`. 1799 | -} 1800 | sadTear : Icon Icon.WithoutId 1801 | sadTear = 1802 | faceSadTear 1803 | 1804 | 1805 | {-| The [“hand-point-left”](https://fontawesome.com/icons/hand-point-left) icon. 1806 | -} 1807 | handPointLeft : Icon Icon.WithoutId 1808 | handPointLeft = 1809 | Icon.present Definitions.handPointLeft 1810 | -------------------------------------------------------------------------------- /src/FontAwesome/Styles.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Styles exposing (css) 2 | 3 | {-| Helpers for adding the CSS required for FontAwesome to your page. 4 | 5 | @docs css 6 | 7 | -} 8 | 9 | import Html exposing (Html) 10 | 11 | 12 | {-| Generates the accompanying CSS that is necessary to correctly display icons. 13 | -} 14 | css : Html msg 15 | css = 16 | Html.node "style" [] [ Html.text ":root, :host { --fa-font-solid: normal 900 1em/1 \"Font Awesome 6 Free\"; --fa-font-regular: normal 400 1em/1 \"Font Awesome 6 Free\"; --fa-font-light: normal 300 1em/1 \"Font Awesome 6 Pro\"; --fa-font-thin: normal 100 1em/1 \"Font Awesome 6 Pro\"; --fa-font-duotone: normal 900 1em/1 \"Font Awesome 6 Duotone\"; --fa-font-duotone-regular: normal 400 1em/1 \"Font Awesome 6 Duotone\"; --fa-font-duotone-light: normal 300 1em/1 \"Font Awesome 6 Duotone\"; --fa-font-duotone-thin: normal 100 1em/1 \"Font Awesome 6 Duotone\"; --fa-font-brands: normal 400 1em/1 \"Font Awesome 6 Brands\"; --fa-font-sharp-solid: normal 900 1em/1 \"Font Awesome 6 Sharp\"; --fa-font-sharp-regular: normal 400 1em/1 \"Font Awesome 6 Sharp\"; --fa-font-sharp-light: normal 300 1em/1 \"Font Awesome 6 Sharp\"; --fa-font-sharp-thin: normal 100 1em/1 \"Font Awesome 6 Sharp\"; --fa-font-sharp-duotone-solid: normal 900 1em/1 \"Font Awesome 6 Sharp Duotone\"; --fa-font-sharp-duotone-regular: normal 400 1em/1 \"Font Awesome 6 Sharp Duotone\"; --fa-font-sharp-duotone-light: normal 300 1em/1 \"Font Awesome 6 Sharp Duotone\"; --fa-font-sharp-duotone-thin: normal 100 1em/1 \"Font Awesome 6 Sharp Duotone\";}svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa { overflow: visible; box-sizing: content-box;}.svg-inline--fa { display: var(--fa-display, inline-block); height: 1em; overflow: visible; vertical-align: -0.125em;}.svg-inline--fa.fa-2xs { vertical-align: 0.1em;}.svg-inline--fa.fa-xs { vertical-align: 0em;}.svg-inline--fa.fa-sm { vertical-align: -0.0714285705em;}.svg-inline--fa.fa-lg { vertical-align: -0.2em;}.svg-inline--fa.fa-xl { vertical-align: -0.25em;}.svg-inline--fa.fa-2xl { vertical-align: -0.3125em;}.svg-inline--fa.fa-pull-left { margin-right: var(--fa-pull-margin, 0.3em); width: auto;}.svg-inline--fa.fa-pull-right { margin-left: var(--fa-pull-margin, 0.3em); width: auto;}.svg-inline--fa.fa-li { width: var(--fa-li-width, 2em); top: 0.25em;}.svg-inline--fa.fa-fw { width: var(--fa-fw-width, 1.25em);}.fa-layers svg.svg-inline--fa { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0;}.fa-layers-counter, .fa-layers-text { display: inline-block; position: absolute; text-align: center;}.fa-layers { display: inline-block; height: 1em; position: relative; text-align: center; vertical-align: -0.125em; width: 1em;}.fa-layers svg.svg-inline--fa { transform-origin: center center;}.fa-layers-text { left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}.fa-layers-counter { background-color: var(--fa-counter-background-color, #ff253a); border-radius: var(--fa-counter-border-radius, 1em); box-sizing: border-box; color: var(--fa-inverse, #fff); line-height: var(--fa-counter-line-height, 1); max-width: var(--fa-counter-max-width, 5em); min-width: var(--fa-counter-min-width, 1.5em); overflow: hidden; padding: var(--fa-counter-padding, 0.25em 0.5em); right: var(--fa-right, 0); text-overflow: ellipsis; top: var(--fa-top, 0); transform: scale(var(--fa-counter-scale, 0.25)); transform-origin: top right;}.fa-layers-bottom-right { bottom: var(--fa-bottom, 0); right: var(--fa-right, 0); top: auto; transform: scale(var(--fa-layers-scale, 0.25)); transform-origin: bottom right;}.fa-layers-bottom-left { bottom: var(--fa-bottom, 0); left: var(--fa-left, 0); right: auto; top: auto; transform: scale(var(--fa-layers-scale, 0.25)); transform-origin: bottom left;}.fa-layers-top-right { top: var(--fa-top, 0); right: var(--fa-right, 0); transform: scale(var(--fa-layers-scale, 0.25)); transform-origin: top right;}.fa-layers-top-left { left: var(--fa-left, 0); right: auto; top: var(--fa-top, 0); transform: scale(var(--fa-layers-scale, 0.25)); transform-origin: top left;}.fa-1x { font-size: 1em;}.fa-2x { font-size: 2em;}.fa-3x { font-size: 3em;}.fa-4x { font-size: 4em;}.fa-5x { font-size: 5em;}.fa-6x { font-size: 6em;}.fa-7x { font-size: 7em;}.fa-8x { font-size: 8em;}.fa-9x { font-size: 9em;}.fa-10x { font-size: 10em;}.fa-2xs { font-size: 0.625em; line-height: 0.1em; vertical-align: 0.225em;}.fa-xs { font-size: 0.75em; line-height: 0.0833333337em; vertical-align: 0.125em;}.fa-sm { font-size: 0.875em; line-height: 0.0714285718em; vertical-align: 0.0535714295em;}.fa-lg { font-size: 1.25em; line-height: 0.05em; vertical-align: -0.075em;}.fa-xl { font-size: 1.5em; line-height: 0.0416666682em; vertical-align: -0.125em;}.fa-2xl { font-size: 2em; line-height: 0.03125em; vertical-align: -0.1875em;}.fa-fw { text-align: center; width: 1.25em;}.fa-ul { list-style-type: none; margin-left: var(--fa-li-margin, 2.5em); padding-left: 0;}.fa-ul > li { position: relative;}.fa-li { left: calc(-1 * var(--fa-li-width, 2em)); position: absolute; text-align: center; width: var(--fa-li-width, 2em); line-height: inherit;}.fa-border { border-color: var(--fa-border-color, #eee); border-radius: var(--fa-border-radius, 0.1em); border-style: var(--fa-border-style, solid); border-width: var(--fa-border-width, 0.08em); padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);}.fa-pull-left { float: left; margin-right: var(--fa-pull-margin, 0.3em);}.fa-pull-right { float: right; margin-left: var(--fa-pull-margin, 0.3em);}.fa-beat { animation-name: fa-beat; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, ease-in-out);}.fa-bounce { animation-name: fa-bounce; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));}.fa-fade { animation-name: fa-fade; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));}.fa-beat-fade { animation-name: fa-beat-fade; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));}.fa-flip { animation-name: fa-flip; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, ease-in-out);}.fa-shake { animation-name: fa-shake; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear);}.fa-spin { animation-name: fa-spin; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 2s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear);}.fa-spin-reverse { --fa-animation-direction: reverse;}.fa-pulse,.fa-spin-pulse { animation-name: fa-spin; animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, steps(8));}@media (prefers-reduced-motion: reduce) { .fa-beat,.fa-bounce,.fa-fade,.fa-beat-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse { animation-delay: -1ms; animation-duration: 1ms; animation-iteration-count: 1; transition-delay: 0s; transition-duration: 0s; }}@keyframes fa-beat { 0%, 90% { transform: scale(1); } 45% { transform: scale(var(--fa-beat-scale, 1.25)); }}@keyframes fa-bounce { 0% { transform: scale(1, 1) translateY(0); } 10% { transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); } 30% { transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); } 50% { transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); } 57% { transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); } 64% { transform: scale(1, 1) translateY(0); } 100% { transform: scale(1, 1) translateY(0); }}@keyframes fa-fade { 50% { opacity: var(--fa-fade-opacity, 0.4); }}@keyframes fa-beat-fade { 0%, 100% { opacity: var(--fa-beat-fade-opacity, 0.4); transform: scale(1); } 50% { opacity: 1; transform: scale(var(--fa-beat-fade-scale, 1.125)); }}@keyframes fa-flip { 50% { transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); }}@keyframes fa-shake { 0% { transform: rotate(-15deg); } 4% { transform: rotate(15deg); } 8%, 24% { transform: rotate(-18deg); } 12%, 28% { transform: rotate(18deg); } 16% { transform: rotate(-22deg); } 20% { transform: rotate(22deg); } 32% { transform: rotate(-12deg); } 36% { transform: rotate(12deg); } 40%, 100% { transform: rotate(0deg); }}@keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.fa-rotate-90 { transform: rotate(90deg);}.fa-rotate-180 { transform: rotate(180deg);}.fa-rotate-270 { transform: rotate(270deg);}.fa-flip-horizontal { transform: scale(-1, 1);}.fa-flip-vertical { transform: scale(1, -1);}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical { transform: scale(-1, -1);}.fa-rotate-by { transform: rotate(var(--fa-rotate-angle, 0));}.fa-stack { display: inline-block; vertical-align: middle; height: 2em; position: relative; width: 2.5em;}.fa-stack-1x,.fa-stack-2x { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; z-index: var(--fa-stack-z-index, auto);}.svg-inline--fa.fa-stack-1x { height: 1em; width: 1.25em;}.svg-inline--fa.fa-stack-2x { height: 2em; width: 2.5em;}.fa-inverse { color: var(--fa-inverse, #fff);}.sr-only,.fa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}.sr-only-focusable:not(:focus),.fa-sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}.svg-inline--fa .fa-primary { fill: var(--fa-primary-color, currentColor); opacity: var(--fa-primary-opacity, 1);}.svg-inline--fa .fa-secondary { fill: var(--fa-secondary-color, currentColor); opacity: var(--fa-secondary-opacity, 0.4);}.svg-inline--fa.fa-swap-opacity .fa-primary { opacity: var(--fa-secondary-opacity, 0.4);}.svg-inline--fa.fa-swap-opacity .fa-secondary { opacity: var(--fa-primary-opacity, 1);}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary { fill: black;}" ] 17 | -------------------------------------------------------------------------------- /src/FontAwesome/Svg.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Svg exposing (view) 2 | 3 | {-| Rendering icons for use in SVG. 4 | 5 | @docs view 6 | 7 | -} 8 | 9 | import FontAwesome.Internal as Icon exposing (Icon(..), IconDef, WithId) 10 | import FontAwesome.Transforms.Internal as Transforms exposing (SvgTransformStyles) 11 | import Svg exposing (Svg) 12 | import Svg.Attributes as SvgA 13 | 14 | 15 | {-| View an icon as an SVG node. 16 | 17 | Note this only supports some features, as some happen at the SVG level. For 18 | example, set titles, attributes, and roles will be ignored. 19 | 20 | -} 21 | view : Icon hasId -> Svg msg 22 | view = 23 | viewInColor "currentColor" 24 | 25 | 26 | viewInColor : String -> Icon hasId -> Svg msg 27 | viewInColor color ((Icon { icon, transforms, id, outer }) as fullIcon) = 28 | let 29 | ( topLevelWidth, _ ) = 30 | Icon.topLevelDimensions fullIcon 31 | 32 | ( width, _ ) = 33 | icon.size 34 | 35 | combinedTransforms = 36 | transforms |> Transforms.meaningfulTransform 37 | in 38 | case combinedTransforms of 39 | Just meaningfulTransform -> 40 | let 41 | svgTransform = 42 | meaningfulTransform 43 | |> Transforms.transformForSvg topLevelWidth width 44 | in 45 | case outer of 46 | Just outerIcon -> 47 | viewMaskedWithTransform 48 | color 49 | svgTransform 50 | icon 51 | outerIcon 52 | 53 | Nothing -> 54 | viewWithTransform color svgTransform icon 55 | 56 | Nothing -> 57 | viewPaths [ SvgA.fill color ] icon 58 | 59 | 60 | viewPath : List (Svg.Attribute msg) -> String -> Svg msg 61 | viewPath attrs d = 62 | Svg.path (SvgA.d d :: attrs) [] 63 | 64 | 65 | viewPaths : List (Svg.Attribute msg) -> IconDef -> Svg msg 66 | viewPaths attrs { paths } = 67 | case paths of 68 | ( only, Nothing ) -> 69 | viewPath attrs only 70 | 71 | ( secondary, Just primary ) -> 72 | Svg.g [ SvgA.class "fa-group" ] 73 | [ viewPath (SvgA.class "fa-secondary" :: attrs) secondary 74 | , viewPath (SvgA.class "fa-primary" :: attrs) primary 75 | ] 76 | 77 | 78 | viewWithTransform : String -> SvgTransformStyles msg -> IconDef -> Svg msg 79 | viewWithTransform color { outer, inner, path } icon = 80 | Svg.g [ outer ] 81 | [ Svg.g [ inner ] 82 | [ viewPaths [ SvgA.fill color, path ] icon 83 | ] 84 | ] 85 | 86 | 87 | fill : List (Svg.Attribute msg) 88 | fill = 89 | [ SvgA.x "0", SvgA.y "0", SvgA.width "100%", SvgA.height "100%" ] 90 | 91 | 92 | viewMaskedWithTransform : String -> SvgTransformStyles msg -> IconDef -> Icon WithId -> Svg msg 93 | viewMaskedWithTransform color transforms exclude ((Icon { id }) as include) = 94 | let 95 | alwaysId = 96 | id |> Maybe.withDefault "" 97 | 98 | maskId = 99 | "mask-" ++ alwaysId 100 | 101 | clipId = 102 | "clip-" ++ alwaysId 103 | 104 | maskTag = 105 | Svg.mask 106 | (SvgA.id maskId 107 | :: SvgA.maskUnits "userSpaceOnUse" 108 | :: SvgA.maskContentUnits "userSpaceOnUse" 109 | :: fill 110 | ) 111 | [ viewInColor "white" include 112 | , viewWithTransform "black" transforms exclude 113 | ] 114 | 115 | defs = 116 | Svg.defs [] [ maskTag ] 117 | 118 | rect = 119 | Svg.rect 120 | (SvgA.fill color 121 | :: SvgA.mask ("url(#" ++ maskId ++ ")") 122 | :: fill 123 | ) 124 | [] 125 | in 126 | Svg.g [] [ defs, rect ] 127 | -------------------------------------------------------------------------------- /src/FontAwesome/Transforms.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Transforms exposing 2 | ( grow, shrink 3 | , up, down, left, right 4 | , rotate, flipV, flipH 5 | , Transform(..), Axis(..) 6 | ) 7 | 8 | {-| Provides tools for transforming icons. 9 | 10 | [See the FontAwesome docs for details.](https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms) 11 | 12 | 13 | # Scaling 14 | 15 | @docs grow, shrink 16 | 17 | 18 | # Positioning 19 | 20 | @docs up, down, left, right 21 | 22 | 23 | # Rotating & Flipping 24 | 25 | @docs rotate, flipV, flipH 26 | 27 | 28 | # Manual 29 | 30 | @docs Transform, Axis 31 | 32 | -} 33 | 34 | 35 | {-| Transform the icon by growing it by the given amount. Units are 1/16em. 36 | -} 37 | grow : Float -> Transform 38 | grow = 39 | Scale 40 | 41 | 42 | {-| Transform the icon by shrinking it by the given amount. Units are 1/16em. 43 | -} 44 | shrink : Float -> Transform 45 | shrink = 46 | negate >> Scale 47 | 48 | 49 | {-| Transform the icon by repositioning it upwards by the given amount. Units are 1/16em. 50 | -} 51 | up : Float -> Transform 52 | up = 53 | negate >> Reposition Vertical 54 | 55 | 56 | {-| Transform the icon by repositioning it downwards by the given amount. Units are 1/16em. 57 | -} 58 | down : Float -> Transform 59 | down = 60 | Reposition Vertical 61 | 62 | 63 | {-| Transform the icon by repositioning it leftwards by the given amount. Units are 1/16em. 64 | -} 65 | left : Float -> Transform 66 | left = 67 | negate >> Reposition Horizontal 68 | 69 | 70 | {-| Transform the icon by repositioning it rightwards by the given amount. Units are 1/16em. 71 | -} 72 | right : Float -> Transform 73 | right = 74 | Reposition Horizontal 75 | 76 | 77 | {-| Transform the icon by flipping it on it's horizontal axis. 78 | -} 79 | flipH : Transform 80 | flipH = 81 | Flip Horizontal 82 | 83 | 84 | {-| Transform the icon by flipping it on it's vertical axis. 85 | -} 86 | flipV : Transform 87 | flipV = 88 | Flip Vertical 89 | 90 | 91 | {-| Transform the icon by rotating it by the given number of degrees clockwise (negateative numbers will produce an 92 | anticlockwise rotation. 93 | -} 94 | rotate : Float -> Transform 95 | rotate = 96 | Rotate 97 | 98 | 99 | {-| Transforms that modify an icon. 100 | -} 101 | type Transform 102 | = Scale Float 103 | | Reposition Axis Float 104 | | Rotate Float 105 | | Flip Axis 106 | 107 | 108 | {-| An axis. 109 | -} 110 | type Axis 111 | = Vertical 112 | | Horizontal 113 | -------------------------------------------------------------------------------- /src/FontAwesome/Transforms/Internal.elm: -------------------------------------------------------------------------------- 1 | module FontAwesome.Transforms.Internal exposing 2 | ( CombinedTransform 3 | , SvgTransformStyles 4 | , baseSize 5 | , combine 6 | , meaningfulTransform 7 | , meaninglessTransform 8 | , transformForSvg 9 | ) 10 | 11 | import FontAwesome.Transforms exposing (..) 12 | import Svg exposing (Svg) 13 | import Svg.Attributes as SvgA 14 | 15 | 16 | baseSize : Float 17 | baseSize = 18 | 16 19 | 20 | 21 | type alias CombinedTransform = 22 | { size : Float 23 | , x : Float 24 | , y : Float 25 | , rotate : Float 26 | , flipX : Bool 27 | , flipY : Bool 28 | } 29 | 30 | 31 | type alias SvgTransformStyles msg = 32 | { outer : Svg.Attribute msg 33 | , inner : Svg.Attribute msg 34 | , path : Svg.Attribute msg 35 | } 36 | 37 | 38 | meaninglessTransform : CombinedTransform 39 | meaninglessTransform = 40 | { size = baseSize 41 | , x = 0 42 | , y = 0 43 | , rotate = 0 44 | , flipX = False 45 | , flipY = False 46 | } 47 | 48 | 49 | combine : List Transform -> CombinedTransform 50 | combine transforms = 51 | List.foldl add meaninglessTransform transforms 52 | 53 | 54 | meaningfulTransform : List Transform -> Maybe CombinedTransform 55 | meaningfulTransform transforms = 56 | let 57 | combined = 58 | combine transforms 59 | in 60 | if combined == meaninglessTransform then 61 | Nothing 62 | 63 | else 64 | Just combined 65 | 66 | 67 | transformForSvg : Int -> Int -> CombinedTransform -> SvgTransformStyles msg 68 | transformForSvg containerWidth iconWidth transform = 69 | let 70 | outer = 71 | "translate(" ++ String.fromFloat (toFloat containerWidth / 2) ++ " 256)" 72 | 73 | innerTranslate = 74 | "translate(" ++ String.fromFloat (transform.x * 32) ++ "," ++ String.fromFloat (transform.y * 32) ++ ") " 75 | 76 | flipX = 77 | if transform.flipX then 78 | -1 79 | 80 | else 81 | 1 82 | 83 | flipY = 84 | if transform.flipY then 85 | -1 86 | 87 | else 88 | 1 89 | 90 | scaleX = 91 | transform.size / baseSize * flipX 92 | 93 | scaleY = 94 | transform.size / baseSize * flipY 95 | 96 | innerScale = 97 | "scale(" ++ String.fromFloat scaleX ++ ", " ++ String.fromFloat scaleY ++ ") " 98 | 99 | innerRotate = 100 | "rotate(" ++ String.fromFloat transform.rotate ++ " 0 0)" 101 | 102 | path = 103 | "translate(" ++ String.fromFloat (toFloat iconWidth / 2 * -1) ++ " -256)" 104 | in 105 | { outer = outer |> SvgA.transform 106 | , inner = innerTranslate ++ innerScale ++ innerRotate |> SvgA.transform 107 | , path = path |> SvgA.transform 108 | } 109 | 110 | 111 | 112 | {- Private -} 113 | 114 | 115 | add : Transform -> CombinedTransform -> CombinedTransform 116 | add transform combined = 117 | case transform of 118 | Scale by -> 119 | { combined | size = combined.size + by } 120 | 121 | Reposition axis by -> 122 | let 123 | ( x, y ) = 124 | case axis of 125 | Vertical -> 126 | ( 0, by ) 127 | 128 | Horizontal -> 129 | ( by, 0 ) 130 | in 131 | { combined | x = combined.x + x, y = combined.y + y } 132 | 133 | Rotate rotation -> 134 | { combined | rotate = combined.rotate + rotation } 135 | 136 | Flip axis -> 137 | case axis of 138 | Vertical -> 139 | { combined | flipY = not combined.flipY } 140 | 141 | Horizontal -> 142 | { combined | flipX = not combined.flipX } 143 | --------------------------------------------------------------------------------