### Install Phoenix SVG Sprites dependency Source: https://github.com/argylewerewolf/phx-svg-sprites/blob/main/README.md Add the library to your Phoenix project by including it in the dependencies list within mix.exs. ```elixir def deps do [ {:phoenix_svg_sprites, git: "https://github.com/ArgyleWerewolf/phx-svg-sprites.git"} ] end ``` -------------------------------- ### Resolve Static Paths with EndpointHelper Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Demonstrates how to configure and use the EndpointHelper to resolve paths for sprite files. It supports dynamic configuration via the Phoenix endpoint module, custom string paths, or a default fallback. ```elixir config :phoenix_svg_sprites, :endpoint, MyAppWeb.Endpoint alias PhoenixSvgSprites.EndpointHelper path = EndpointHelper.static_path("sprites.svg") ``` -------------------------------- ### Generate and Use Namespaced Sprite Sheets Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Shows how to generate multiple sprite sheets using the Mix task and how to render them in Phoenix templates using the sprite component with specific id prefixes. ```bash mix phoenix_svg_sprites --dirs "assets/ui_icons" --id-prefix "ui" mix phoenix_svg_sprites --dirs "assets/social_icons" --id-prefix "social" ``` ```elixir <.sprite icon="button" id_prefix="ui" /> <.sprite icon="twitter" id_prefix="social" /> ``` -------------------------------- ### Programmatically Build SVG Sprite Sheet Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Builds an SVG sprite sheet using the `Mix.Tasks.PhoenixSvgSprites.build/1` function with a configuration map. Returns the output path on success or an error reason. ```elixir config = %{ dirs: ["assets/svg_sprites", "assets/icons"], output_dir: "priv/static/assets/", output_file: "sprites.svg", id_prefix: "my-app", verbose: true } case Mix.Tasks.PhoenixSvgSprites.build(config) do {:ok, output_path} -> IO.puts("Sprite sheet generated at: #{output_path}") {:error, reason} -> IO.puts("Failed: #{reason}") end {:ok, path} = Mix.Tasks.PhoenixSvgSprites.build(%{ dirs: ["assets/icons"] }) ``` -------------------------------- ### Mix Task: Build SVG Sprite Sheet Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Uses the `mix phoenix_svg_sprites` task to combine SVG files into a single sprite sheet. Supports custom directories, output paths, file names, and ID prefixes. ```bash mix phoenix_svg_sprites mix phoenix_svg_sprites \ --dirs "assets/svg_sprites,assets/custom_icons" \ --output-dir "priv/static/assets/" \ --output-file "sprites.svg" \ --id-prefix "app" \ --verbose ``` -------------------------------- ### Render sprites in Phoenix LiveView templates Source: https://github.com/argylewerewolf/phx-svg-sprites/blob/main/README.md Import the sprite component and use it within HEEX templates to render icons with custom dimensions, classes, and titles. ```elixir import PhoenixSvgSprites.Sprite <.sprite icon="user" /> <.sprite icon="alert" dimensions="h-8 w-8" class="text-red-400 hover:scale-110 transition-transform" /> <.sprite icon="illustration" title="An illustration of a mountainous landscape at sunset" class="object-cover" /> ``` -------------------------------- ### Static Path Resolution Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Resolves the static path for sprite files based on the configured endpoint mode. ```APIDOC ## Static Path Resolution ### Description Resolves the static path for sprite files using the configured endpoint. Supports three configuration modes: endpoint module, custom string path, or default fallback. ### Method N/A (Helper function) ### Endpoint N/A ### Parameters #### Path Parameters - **sprite_file** (string) - Required - The name of the sprite file (e.g., "sprites.svg"). ### Request Example ```elixir # Configuration in config.exs # Option 1: Use Phoenix endpoint module (recommended) config :phoenix_svg_sprites, :endpoint, MyAppWeb.Endpoint # static_path("sprites.svg") returns endpoint.static_path("sprites.svg") # Option 2: Use custom base path string config :phoenix_svg_sprites, :endpoint, "/custom/assets/" # static_path("sprites.svg") returns "/custom/assets/sprites.svg" # Option 3: No configuration (uses default) # static_path("sprites.svg") returns "/assets/sprites.svg" ``` ### Response #### Success Response (string) - **resolved_path** (string) - The full static path to the sprite file. ### Response Example ```elixir # Assuming default configuration path = PhoenixSvgSprites.EndpointHelper.static_path("sprites.svg") # Returns: "/assets/sprites.svg" ``` ``` -------------------------------- ### Using the Sprite Component Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Renders an SVG icon from a generated sprite sheet using the `<.sprite>` component. ```APIDOC ## Using the Sprite Component ### Description Provides a convenient component to render individual icons from sprite sheets within Phoenix LiveView templates. It supports standard SVG attributes, Tailwind CSS classes, and event bindings. ### Method LiveView Component (`<.sprite ... />`) ### Endpoint N/A ### Parameters #### Component Attributes - **icon** (string) - Required - The name of the icon within the sprite sheet (without the prefix). - **id_prefix** (string) - Optional - The prefix used when generating the sprite sheet. If not provided, it defaults to the sprite sheet name or a default prefix. - **dimensions** (string) - Optional - Tailwind CSS classes for setting the icon's dimensions (e.g., "h-6 w-6"). - **...other attributes** - Any valid SVG or Phoenix LiveView attributes (e.g., `class`, `phx-click`). ### Request Example ```elixir # Assuming 'ui-sprites.svg' was generated with --id-prefix "ui" <.sprite icon="button" id_prefix="ui" class="text-blue-500" /> # Assuming 'social-sprites.svg' was generated with --id-prefix "social" <.sprite icon="twitter" id_prefix="social" dimensions="h-12 w-12" /> # Assuming 'brand-sprites.svg' was generated with --id-prefix "brand" <.sprite icon="logo" id_prefix="brand" dimensions="h-12 w-12" title="Company Logo" /> ``` ### Response #### Success Response (Rendered SVG) - **SVG Element** - An SVG `` element containing the specified icon's ``. #### Response Example ```html ``` ``` -------------------------------- ### Generate SVG sprite sheet via Mix task Source: https://github.com/argylewerewolf/phx-svg-sprites/blob/main/README.md Execute the mix task to process SVG files from specified directories into a single sprite sheet file. ```bash mix phoenix_svg_sprites \ --dirs "assets/svg_sprites,assets/custom_icons" \ --output-dir "priv/static/assets/" \ --id-prefix "custom" \ --verbose ``` -------------------------------- ### Find SVG Files Recursively Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Finds all SVG files within specified directories using `Mix.Tasks.PhoenixSvgSprites.find_svg_files/2`. Returns a sorted list of file paths or an error if none are found. Supports verbose logging. ```elixir "assets/icons/alert.svg", "assets/icons/check.svg", "assets/svg_sprites/home.svg", "assets/svg_sprites/user.svg" ] case Mix.Tasks.PhoenixSvgSprites.find_svg_files(["empty_dir"], false) do {:ok, files} -> IO.puts("Found #{length(files)} SVG files") {:error, msg} -> IO.puts("Error: #{msg}") end ``` -------------------------------- ### Generating Multiple Sprite Sheets Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Generates separate sprite sheets for different icon categories using the Mix task. ```APIDOC ## Generating Multiple Sprite Sheets ### Description Allows for the creation and use of multiple namespaced sprite sheets for better organization of different icon sets. ### Method `mix` command ### Endpoint N/A ### Parameters #### Command Line Arguments - **--dirs** (string) - Required - Path to the directory containing SVG icons. - **--id-prefix** (string) - Optional - A prefix to namespace the generated sprite sheet and its icons. ### Request Example ```bash # Generate separate sprite sheets for different icon categories mix phoenix_svg_sprites --dirs "assets/ui_icons" --id-prefix "ui" mix phoenix_svg_sprites --dirs "assets/social_icons" --id-prefix "social" mix phoenix_svg_sprites --dirs "assets/brand_icons" --id-prefix "brand" # Output files: # - priv/static/assets/ui-sprites.svg # - priv/static/assets/social-sprites.svg # - priv/static/assets/brand-sprites.svg ``` ### Response #### Success Response (File Generation) - **Generated SVG Sprite Files** - Files are created in the `priv/static/assets/` directory. ### Response Example ``` # Example output file content (simplified): ``` ``` -------------------------------- ### Render SVG Sprite with LiveView Component Source: https://context7.com/argylewerewolf/phx-svg-sprites/llms.txt Uses the `PhoenixSvgSprites.Sprite.sprite/1` LiveView component to render individual icons from a sprite sheet in HEEX templates. Supports custom dimensions, classes, accessibility attributes, and ID prefixes. ```heex <.sprite icon="home" /> <.sprite icon="alert" dimensions="h-8 w-8" class="text-red-500 hover:text-red-700" /> <.sprite icon="landscape" title="A beautiful mountain landscape at sunset" class="object-cover" /> <.sprite icon="twitter" id_prefix="social" /> <.sprite icon="checkmark" phx-click="confirm_action" data-confirm="Are you sure?" dimensions="h-5 w-5" /> <.sprite icon="logo" width="48" height="48" /> ``` -------------------------------- ### Apply dynamic attributes to sprites Source: https://github.com/argylewerewolf/phx-svg-sprites/blob/main/README.md Pass dynamic attributes such as Phoenix event bindings or data attributes directly to the sprite component. ```elixir <.sprite icon="checkmark" phx-click="confirm" data-confirm="Are you sure?" /> ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.