Phoenix Live Favicon

Provides commands for manipulating the Favicon of Phoenix Live View applications while minimizing data over the wire.

The available command actions support a variety of utility operations useful for Favicon manipulation. Such as setting or removing tag attributes and adding or removing CSS classes for vector (SVG) favicons.

A special feature is the use of the {dynamic} tag in values. This saves data over the wire by only sending a part of the value.

installation

Installation

Te package can be installed by adding phoenix_live_favicon to your list of dependencies in mix.exs:

def deps do
  [
    {:phoenix_live_favicon, "~> 0.1.0"}
  ]
end

To include the necessary client side Javascript, import the Javascript module from dependency Phoenix Live Head in assets/js/app.js

import "phoenix_html"
// Establish Phoenix Socket and LiveView configuration.
import { Socket } from "phoenix"
import { LiveSocket } from "../vendor/phoenix_live_view/"
import topbar from "../vendor/topbar"
import "phoenix_live_head" // <-- ADD HERE.

usage

Usage

Add one or multiple sizes of your favicon to your applications main template. It's attributes can be manipulated using the convenience functions from the Phx.Live.Favicon module

example

Example

<!-- in /templates/layout/root.html.heex -->
<!-- some attributes have been omitted to fit box width -->
<link [...] data-dynamic-href="images/{dynamic}/favicon-32x32.png" href={"images/favicon-32x32.png"}>
<link [...] data-dynamic-href="images/{dynamic}/favicon-16x16.png" href={"images/favicon-16x16.png"}>

In this example the page shows images/favicon-32x32.png by default.

When the user opens a chat, we want to show an favicon with an envelope.
Action: Favicon.set_dynamic(socket, 'href', 'no_messages_unread')
Result: The href will become images/no_messages_unread/favicon-32x32.png.

When we send the user a message, the favicon should indicate a message is received. Action: Favicon.set_dynamic(socket, 'href', 'messages_unread')
Result: The href becomes images/messages_unread/favicon-32x32.png.

To return the favicon to it's default after the chat is closed simply call Favicon.reset(socket).

For all functions have a look at the documentation at HexDocs