{"id":13808999,"url":"https://github.com/jsonmaur/phoenix-svg","last_synced_at":"2025-03-26T20:31:37.231Z","repository":{"id":155671199,"uuid":"632590600","full_name":"jsonmaur/phoenix-svg","owner":"jsonmaur","description":"Inline SVG component for Phoenix","archived":false,"fork":false,"pushed_at":"2023-10-06T15:05:36.000Z","size":53,"stargazers_count":11,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T07:08:35.142Z","etag":null,"topics":["elixir","icons","liveview","phoenix","svg"],"latest_commit_sha":null,"homepage":"https://hexdocs.pm/phoenix_svg","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsonmaur.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-04-25T18:15:14.000Z","updated_at":"2024-07-11T00:24:13.000Z","dependencies_parsed_at":"2024-01-27T08:40:21.985Z","dependency_job_id":"6209b4f2-7486-4e9b-8a50-ff5fcb08c6b5","html_url":"https://github.com/jsonmaur/phoenix-svg","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fphoenix-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fphoenix-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fphoenix-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fphoenix-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsonmaur","download_url":"https://codeload.github.com/jsonmaur/phoenix-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245731501,"owners_count":20663199,"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":["elixir","icons","liveview","phoenix","svg"],"created_at":"2024-08-04T01:01:57.374Z","updated_at":"2025-03-26T20:31:34.783Z","avatar_url":"https://github.com/jsonmaur.png","language":"Elixir","funding_links":[],"categories":["Framework Components"],"sub_categories":[],"readme":"# Phoenix SVG\n\nUse inline SVGs in Phoenix apps. This module will load the files during compilation so you don't have to worry about performance, handle refreshing the cache when the files change, inline the SVG tags into your templates, and includes support for defining custom attributes with defaults.\n\n## Installation\n\n```elixir\ndef deps do\n  [\n    {:phoenix_svg, \"~\u003e 1.0\"}\n  ]\nend\n```\n\nThe recommended way to install into your Phoenix application is to create a file at `lib/myapp_web/svg.ex` (replacing `myapp` with the name of your app):\n\n```elixir\ndefmodule MyAppWeb.SVG do\n  use PhoenixSVG, otp_app: :myapp\nend\n```\n\nThis is so the files are only read and cached once. Then you can simply import `MyAppWeb.SVG` wherever you need to use the component. A good place to do this is in the `html_helpers` function in `lib/myapp_web.ex`:\n\n```elixir\ndefp html_helpers do\n  quote do\n    # ...\n\n    import MyAppWeb.SVG\n\n    # ...\n  end\nend\n```\n\n## Getting Started\n\nNow when you start your Phoenix server, all the SVG files located in `priv/svgs` will be loaded into memory and can be used with the svg component. For example, if you have a file at `priv/svgs/checkmark.svg`:\n\n```heex\n\u003c.svg name=\"checkmark\" /\u003e\n```\n\nAn error will be raised if the file is not found. If your svgs are nested in a subdirectory, specify a list in the `path` attribute with one item representing each folder. e.g. for `priv/svgs/branding/circle/checkmark.svg`:\n\n```heex\n\u003c.svg name=\"checkmark\" path={[\"branding\", \"circle\"]} /\u003e\n```\n\nAny attributes defined will be passed through to the `\u003csvg\u003e` tag:\n\n```heex\n\u003c.svg name=\"checkmark\" class=\"foobar\" /\u003e\n```\n\n## Local Development\n\nIf you add, remove, or change svg files while running `mix phx.server`, they will automatically be replaced in the cache and you don't have to restart for them to take effect. To live reload when an svg file changes, add to the patterns list of the Endpoint config in `config/dev.exs`:\n\n```elixir\nconfig :myapp, MyAppWeb.Endpoint,\n  live_reload: [\n    patterns: [\n      # ...\n      ~r\"priv/svgs/.*(svg)$\",\n      # ...\n    ]\n  ]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonmaur%2Fphoenix-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsonmaur%2Fphoenix-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonmaur%2Fphoenix-svg/lists"}