Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pinata-llc/parcel-plugin-elm-svg
Use SVG files from Elm seamlessly
https://github.com/pinata-llc/parcel-plugin-elm-svg
elm icons inline-svg loader parcel-bundler svg svg-to-elm svg2elm
Last synced: 3 months ago
JSON representation
Use SVG files from Elm seamlessly
- Host: GitHub
- URL: https://github.com/pinata-llc/parcel-plugin-elm-svg
- Owner: pinata-llc
- License: bsd-3-clause
- Created: 2020-01-14T02:15:39.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T12:24:08.000Z (over 3 years ago)
- Last Synced: 2024-08-10T09:17:58.790Z (5 months ago)
- Topics: elm, icons, inline-svg, loader, parcel-bundler, svg, svg-to-elm, svg2elm
- Language: Elm
- Homepage:
- Size: 1.02 MB
- Stars: 6
- Watchers: 7
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# parcel-plugin-elm-svg
[](https://www.npmjs.com/package/parcel-plugin-elm-svg) [](LICENSE)
This parcel plugin automatically generates Elm modules out of your SVG files so you can easily inline icons in your Elm app without having to use Image elements.
This technique allows you to [tweak your icons on a per-usage basis](https://github.com/pinata-llc/svg2elm#svg-attributes), so you can reuse your icon in different places of your app where you might need different colors, sizes, line widths, you name it!
This plugin is a thin wrapper around our [svg2elm](https://github.com/pinata-llc/svg2elm) tool that solves one specific use case. However, you might be interested in using `svg2elm` if you are using a different bundler, or you need improved flexibility.
## Update
This plugin had a bug that prevented its configuration from loading if the parcel entry didn't exist in the same directory as `package.json`. That's fixed now!
Please create an issue if it still doesn't work for you :)
## Installation
Add `parcel-plugin-elm-svg` as a development dependency to your project:
```console
$ npm install -D parcel-plugin-elm-svg@latest
```
## How to use
### Module configuration
Open up your `package.json` file and add:
```json
"elmSvgModules": [
{
"src": "assets/*.svg",
"name": "Acme.Icons",
"dest": "src/Acme/Icons.elm"
}
]
```
This configuration will take all `.svg` files under the `assets` directory and generate an `Acme.Icons` Elm module at `src/Acme/Icons.elm` with a function per file.
Tweak module properties to match your needs:
src
A glob matching the SVG files to include in this module. Check out the rules.
name
The name of the Elm module to generate.
dest
The destination file path for your generated module.
#### Multiple modules
If you have different sets of assets, you can generate multiple Elm modules:
```json
"elmSvgModules": [
{
"src": "assets/accounts/*.svg",
"name": "Acme.Assets.Accounts",
"dest": "src/Acme/Assets/Accounts.elm"
},
{
"src": "assets/shapes/*.svg",
"name": "Acme.Assets.Shapes",
"dest": "src/Acme/Assets/Shapes.elm"
}
]
```
Since 0.19, Elm performs [Dead Code Elimination](https://elm-lang.org/news/small-assets-without-the-headache#dead-code-elimination); this means that you don't have to worry about separating assets by bundle. Only the used assets are shipped to production. However, you might still want to do this for your own code organization.
### Running
Run parcel as you usually would:
```console
$ parcel src/app.html
```
### Using your icons
We can now use our generated icon functions in our Elm app:
```elm
module Main exposing (main)
import Html
import Svg.Attributes exposing (fill, width, stroke)
import Acme.Icons exposing (user, chevron)
main =
Html.div []
[ user [ fill "red" ]
, chevron [ stroke "red" ]
, user [ fill "blue", width "20" ]
]
```
Check out [svg2elm](https://github.com/pinata-llc/svg2elm) docs and the [example](example) app for more information.
We hope you enjoy the plugin!
## Contributing
PRs and Issues are welcome!
Bugs and Feature Requests related to the parcel plugin must be raised in [this repository](https://github.com/pinata-llc/parcel-plugin-elm-svg).
If your assets are not getting converted to Elm functions properly, the problem is likely to exist in [svg2elm](https://github.com/pinata-llc/svg2elm) instead. For example, if your generated Elm module does not compile, or the Svg does not look as it should, please raise your PR or issue in the [svg2elm](https://github.com/pinata-llc/svg2elm) repository.
## License
BSD-3-Clause. See the [LICENSE](LICENSE) file.
## Humans
Built by [Piotr Brzeziński](https://github.com/brzezinskip), [Diogo do Carmo](https://github.com/dccarmo), and [Agustín Zubiaga](https://github.com/agu-z) at [PINATA.](https://www.gopinata.com)
♥︎