{"id":16589492,"url":"https://github.com/rnons/elm-svg-loader","last_synced_at":"2025-10-29T09:31:51.752Z","repository":{"id":57222617,"uuid":"110113140","full_name":"rnons/elm-svg-loader","owner":"rnons","description":"A webpack loader that inlines external SVG file into Elm views","archived":false,"fork":false,"pushed_at":"2018-08-23T13:20:26.000Z","size":113,"stargazers_count":8,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-02T00:31:54.282Z","etag":null,"topics":["elm","svg","svg-loader","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rnons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-09T12:33:57.000Z","updated_at":"2018-10-08T16:57:03.000Z","dependencies_parsed_at":"2022-08-29T01:50:48.798Z","dependency_job_id":null,"html_url":"https://github.com/rnons/elm-svg-loader","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnons%2Felm-svg-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnons%2Felm-svg-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnons%2Felm-svg-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rnons%2Felm-svg-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rnons","download_url":"https://codeload.github.com/rnons/elm-svg-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238803259,"owners_count":19533282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","svg","svg-loader","webpack-loader"],"created_at":"2024-10-11T23:09:01.324Z","updated_at":"2025-10-29T09:31:50.994Z","avatar_url":"https://github.com/rnons.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG loader for Elm\n\n**NOTE: This repo is not maintained any more. Feel free to fork and upload to elm-packages by yourself.**\n\n[![npm](https://img.shields.io/npm/v/elm-svg-loader.svg)](https://www.npmjs.com/package/elm-svg-loader)\n[![Elm package](https://img.shields.io/elm-package/v/rnons/elm-svg-loader.svg)](http://package.elm-lang.org/packages/rnons/elm-svg-loader/latest)\n\nA webpack loader that inlines external SVG file into Elm views. It consists of a elm package and a npm package. [DEMO](https://rnons.github.io/elm-svg-loader).\n\nInspired by [elm-css-modules-loader](https://github.com/cultureamp/elm-css-modules-loader).\n\n## Overview\n\n```\nmodule Main exposing (..)\n\nimport Svg.Attributes\nimport InlineSvg exposing (inline)\n\n{ icon } =\n    inline\n        { github = \"./svg/github.svg\"\n        , share = \"./svg/share.svg\"\n        }\n\nview =\n    div\n        []\n        [ icon .github [ Svg.Attributes.class \"icon icon--github\" ]\n        , icon .share [ Svg.Attributes.class \"icon icon--share\" ]\n        ]\n```\n\n## Setup\n\nAdd `elm-svg-loader` and `raw-loader` to your project.\n\n```\nnpm install raw-loader elm-svg-loader --save-dev\n```\n\nor\n\n```\nyarn add raw-loader elm-svg-loader --dev\n```\n\n### Webpack config\n\n```\nmodule.exports = {\n  ⋮\n  module: {\n    rules: [\n      {\n        test: /\\.elm$/,\n        use: [\n          {\n            loader: \"elm-svg-loader\",\n          },\n          {\n            loader: \"elm-webpack\",\n          }\n        ],\n      },\n      {\n        test: /\\.svg$/,\n        loaders: [\"raw-loader\"]\n      }\n      ⋮\n    ],\n  },\n};\n```\n\n### Elm package\n\n```\nelm-package install rnons/elm-svg-loader\n```\n\nThen you can `import InlineSvg` as in the [Overview](#overview) section.\n\n\n## Under the hood\n\n1. Without `elm-svg-loader`, webpack will compile\n\n    ```\n    { icon } =\n        inline\n            { github = \"./svg/github.svg\"\n            , share = \"./svg/share.svg\"\n            }\n    ```\n\n    to\n\n    ```\n    var _user$project$Main$_p0 = _rnons$elm_svg_loader$InlineSvg$inline(\n      {github: './svg/mark-github.svg', share: './svg/share.svg'});\n    ```\n\n2. `elm-svg-loader` will replace the svg file location with a `require` statement\n\n    ```\n    var _user$project$Main$_p0 = _rnons$elm_svg_loader$InlineSvg$inline(\n      {github: require('./svg/mark-github.svg'), share: require('./svg/share.svg')});\n    ```\n\n3. With the help of `raw-loader`, `require('./svg/mark-github.svg')` will become the actual svg file content.\n\n4. With the help of [elm-svg-parser](https://github.com/rnons/elm-svg-parser), the `icon` function in `icon .github []` parses the svg file content `String` to a `Html msg` so that it can be used in Elm views.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnons%2Felm-svg-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frnons%2Felm-svg-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frnons%2Felm-svg-loader/lists"}