{"_id":"@aguzubiaga/svg2elm","name":"@aguzubiaga/svg2elm","dist-tags":{"latest":"1.3.0"},"versions":{"1.3.0":{"name":"@aguzubiaga/svg2elm","version":"1.3.0","description":"Generates Elm modules out of SVG files","main":"dist/svg2elm.js","bin":{"svg2elm":"bin/svg2elm"},"scripts":{"build":"parcel build src/svg2elm.ts src/cli.ts --target node && tsc --emitDeclarationOnly","docs":"typedoc --excludeNotExported --out docs src/svg2elm.ts && touch docs/.nojekyll"},"repository":{"type":"git","url":"git+https://github.com/pinata-llc/svg2elm.git"},"keywords":["convert","svg","elm","icons","inline-svg","svg-to-elm"],"contributors":[{"name":"Agustín Zubiaga","email":"agustin@gopinata.com"},{"name":"Piotr Brzeziński","email":"piotr@gopinata.com"}],"license":"BSD-3-Clause","bugs":{"url":"https://github.com/pinata-llc/svg2elm/issues"},"homepage":"https://github.com/pinata-llc/svg2elm#readme","devDependencies":{"@types/node":"^13.13.5","@types/yargs":"^15.0.4","elm":"^0.19.1-5","node-elm-compiler":"^5.0.5","parcel-bundler":"^1.12.5","typedoc":"^0.17.6","typescript":"^3.8.3"},"dependencies":{"yargs":"^15.3.1"},"types":"./dist/svg2elm.d.ts","gitHead":"3992b9c1975e8679e7387c1362b4787b73d53647","_id":"@aguzubiaga/svg2elm@1.3.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-HdJBJGsTnNpxA45DJ2fS2W1tlt521Bk3ED647uCysmvBLh/Q4n0FztCNkVzSoodcfGsJGGiQa53hN0KiME/4MA==","shasum":"98b381105714c3e200655ecfcd3b9b9fb06ec949","tarball":"https://registry.npmjs.org/@aguzubiaga/svg2elm/-/svg2elm-1.3.0.tgz","fileCount":10,"unpackedSize":51453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5J5eaHJdmvdHPiohxcD6CDScOgvyLecG/u8d0OpCAbAIhAIG2wtUMqgvesmsaCp5pdHvzl1uY66Ouu65vu4ei5DFI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHK2OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyfhAAl1zZVav7/Rk4U0mJZxJzl+N9F8y+SzZdlAFHKl4hQDdYNFuY\r\nWhkQX3IXENL53/EDKsP7KvV1iWNepTU2+UN8umSauqL+m/2c49ScB7Zi5ebc\r\nSUrBfEjSDv6wCOS+qpk9n175zxDwyI37G7ux78drVda5+2lgPCcTKIGtqsQZ\r\nPBxKnAOtZxj2OH1k1VouOwxNNlxw7I4OU1PorYWwuU4KxvLk0PuYcg7cdrTJ\r\nNEWQYu+3TmcfQNwetl/XuAhstojb3uZ2EQVqN2zli3bc4IjVE8+2690ZRnyP\r\nbhZwW5YK4ef0T1WojJ15FC3I39SfgfUnZ0JnQMcsWopXrDnKEKcaRFtEQeR4\r\nHG5WqMrztoxv1hJzV/8ApyYtNCDLwmxTXf+7NsiN4wekdql1FfNMK72T0NrR\r\n4Kqmv8yHbsuzErnguZ27vxdqr1THJObX4HfLNtQ5OZrkuJCIQ70DVGqpTkCL\r\n3ER+YEiog8xUQ2e+Qtdwu5ncmOpooQLvpC1gHW6NVLX2ZtjXmKvqiMKW/uRF\r\nWDRZdGg7m9iT0A+WvfD7QFzskx/+C+BD1U0/flpxahnW1coTL0LjKVM2BoFQ\r\n6nx8G+72krg9y673q21ndcbgpeEGebZvwx4EWI8C6igzRnFlqkUs6pOh74Rz\r\nOC3OJOU3ARUydlCa/XiHwleW8Oq2XJF0S+s=\r\n=vKny\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aguzubiaga","email":"sup@aguz.me"},"directories":{},"maintainers":[{"name":"aguzubiaga","email":"sup@aguz.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svg2elm_1.3.0_1662823822542_0.02466961919825783"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-10T15:30:22.496Z","1.3.0":"2022-09-10T15:30:22.724Z","modified":"2022-09-10T15:30:22.863Z"},"maintainers":[{"name":"aguzubiaga","email":"sup@aguz.me"}],"description":"Generates Elm modules out of SVG files","homepage":"https://github.com/pinata-llc/svg2elm#readme","keywords":["convert","svg","elm","icons","inline-svg","svg-to-elm"],"repository":{"type":"git","url":"git+https://github.com/pinata-llc/svg2elm.git"},"contributors":[{"name":"Agustín Zubiaga","email":"agustin@gopinata.com"},{"name":"Piotr Brzeziński","email":"piotr@gopinata.com"}],"bugs":{"url":"https://github.com/pinata-llc/svg2elm/issues"},"license":"BSD-3-Clause","readme":"# svg2elm\n\n[![npm version](https://img.shields.io/npm/v/svg2elm.svg)](https://www.npmjs.com/package/svg2elm) [![GitHub license](https://img.shields.io/npm/l/svg2elm)](LICENSE)\n\nGenerates Elm modules out of SVG files. Comes with a [CLI tool](#installation) and a [JavaScript API](#api) to build bundler plugins.\n\nUsing Parcel? Check out [parcel-plugin-elm-svg](https://github.com/pinata-llc/parcel-plugin-elm-svg).\n\n## Installation\n\nYou can install `svg2elm` from npm:\n\n```console\n$ npm install -g svg2elm\n```\n\n## How to use\n\nLet's say we have a chevron icon that we want to embed in our Elm app:\n\n```console\n$ cat chevron.svg\n```\n\n```html\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n    <line x1=\"1\" y1=\"1\" x2=\"50\" y2=\"50\" stroke-linecap=\"round\" />\n    <line x1=\"50\" y1=\"50\" x2=\"1\" y2=\"99\" stroke-linecap=\"round\" />\n</svg>\n```\n\nUsing `svg2elm` we can generate an Elm module out of it. Let's call ours `Acme.Icons`:\n\n```console\n$ svg2elm --module Acme.Icons chevron.svg > Acme/Icons.elm\n```\n\n```elm\nmodule Acme.Icons exposing (..)\n\nimport Svg\nimport VirtualDom exposing (Attribute, attribute)\n\nchevron : List (Attribute msg) -> Svg.Svg msg\nchevron attrs = Svg.node \"svg\" ([attribute \"xmlns\" \"http://www.w3.org/2000/svg\", attribute \"viewBox\" \"0 0 100 100\"] ++ attrs) [ Svg.node \"line\" ([attribute \"x1\" \"1\", attribute \"y1\" \"1\", attribute \"x2\" \"50\", attribute \"y2\" \"50\", attribute \"stroke-linecap\" \"round\"]) [], Svg.node \"line\" ([attribute \"x1\" \"50\", attribute \"y1\" \"50\", attribute \"x2\" \"1\", attribute \"y2\" \"99\", attribute \"stroke-linecap\" \"round\"]) []]\n```\n\nWe are now ready to embed the icon in our app! Since the generated function returns an [Svg](https://package.elm-lang.org/packages/elm/svg/latest/Svg#Svg) node, we can use it like any other element:\n\n```elm\nimport Acme.Icons exposing (chevron)\n\n...\n\nnextPage =\n    button []\n        [ text \"Next Page\"\n        , chevron []\n        ]\n```\n\n## SVG Attributes\n\nNote that the generated function takes a [List](https://package.elm-lang.org/packages/elm/core/latest/List) of [Attributes](https://package.elm-lang.org/packages/elm/virtual-dom/latest/VirtualDom#Attribute):\n\n```elm\nchevron : List (Attribute msg) -> Svg.Svg msg\n```\n\nThis allows us to tweak our icons in a per usage basis. For example, if we wanted to point our chevron to the left, we could do the following:\n\n```elm\npreviousPage =\n    button []\n        [ text \"Previous Page\"\n        , chevron [ transform \"rotate(180)\" ]\n        ]\n```\n\nSimilarly, we could change the size, colors, stroke width, etc.\n\n```elm\n...\n        , chevron [ width \"30\", stroke \"blue\", strokeWidth \"2\" ]\n...\n```\n\nAttributes are appended to the top SVG node. This means that you can only override those set at that level. This is usually not a problem since child nodes inherit parent attributes. However, you might have to tweak your SVG to fit your needs.\n\n## Multiple icons per module\n\nYou likely want to generate a module with all your app icons. You can do this by passing multiple files to `svg2elm`:\n\n```console\n$ svg2elm --module Acme.Icons icons/chevron.svg icons/user.svg\n```\n\n...or you can use globs:\n\n```console\n$ svg2elm --module Acme.Icons icons/*.svg\n```\n\nA function will be generated for each SVG file.\n\n## Elm UI\n\nIf you're using the _awesome_ [mdgriffith/elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/), you have to use [Element.html](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#html) to turn your [Svg](https://package.elm-lang.org/packages/elm/svg/latest/Svg#Svg) node into an [Element](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#Element).\n\n```elm\nnextPage =\n    button []\n        [ text \"Next Page\"\n        , chevron [] |> html\n        ]\n```\n\n## API\n\nThis package also exposes a JavaScript API that can be used to fit `svg2elm` into any build process.\n\nIt's just three functions: [reference](https://pinata-llc.github.io/svg2elm/modules/_svg2elm_.html).\n\n## Inspiration\n\nAt [PINATA](https://www.gopinata.com), we have been using [SVGR](https://github.com/gregberge/svgr) for years to load our icons as React components. This project aims to bring the same experience to the world of Elm.\n\n## License\n\nBSD-3-Clause. See [LICENSE](LICENSE) file.\n\n## Humans\n\nThanks to [rnons](https://github.com/rnons) for building [elm-svg-parser](https://package.elm-lang.org/packages/rnons/elm-svg-parser/latest/) and [Garados007](https://github.com/Garados007) for making it work with Elm 0.19.\n\nBuilt by [Piotr Brzeziński](https://github.com/brzezinskip) and [Agustín Zubiaga](https://github.com/aguzubiaga) at [PINATA.](https://www.gopinata.com)\n\n♥︎\n","readmeFilename":"README.md"}