### Install and Watch Dependencies (Node.js)

Source: https://github.com/green-coder/vrac-phosphor-icons/blob/main/phosphor-icons-exporter/README.md

Installs project dependencies using npm and starts Shadow-CLJS in watch mode for continuous compilation. This is the initial setup step for development.

```bash
npm install
npm run dev
```

--------------------------------

### Full Application Integration Example with Phosphor Icons (Clojure)

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

This example demonstrates a complete ClojureScript application integrating Phosphor Icons for navigation, status indicators, and a showcase section. It uses vrac.web for UI rendering and phosphor.icon for accessing various icon components. The code highlights how to use different icon variants and apply styles and sizes.

```clojure
(ns my-app.core
  (:require [vrac.web :as vw :refer [$]]
            [phosphor.icon :as pi]))

(defn navbar []
  ($ :nav.navigation
     ($ :a.nav-link {:href "/home"}
        ($ pi/house)
        "Home")
     ($ :a.nav-link {:href "/settings"}
        ($ pi/gear)
        "Settings")
     ($ :a.nav-link {:href "/profile"}
        ($ pi/user-circle)
        "Profile")
     ($ :a.button.primary {:href "https://github.com/my-project"}
        ($ pi/github-logo {:style {:margin-right "0.5em"}})
        "Star on GitHub")))

(defn status-indicators []
  ($ :div.status-bar
     ($ pi/wifi-high {:style {:color "green"}})
     ($ pi/battery-charging {:style {:color "blue"}})
     ($ pi/bell-fill {:style {:color "orange"}})
     ($ pi/warning-circle {:style {:color "red"}})))

(defn icon-showcase []
  ($ :section.showcase
     ($ :h2 "Icon Styles")
     ($ :div.icon-grid
        ;; Different weights
        ($ pi/heart-thin {:width "2em" :height "2em"})
        ($ pi/heart-light {:width "2em" :height "2em"})
        ($ pi/heart {:width "2em" :height "2em"})
        ($ pi/heart-bold {:width "2em" :height "2em"})
        ($ pi/heart-duotone {:width "2em" :height "2em"})
        ($ pi/heart-fill {:width "2em" :height "2em"})))

(defn app-root []
  ($ :<>
     ($ navbar)
     ($ status-indicators)
     ($ icon-showcase)))

;; Mount to DOM
(vw/render (js/document.getElementById "app")
           ($ app-root))

;; Returns: Fully rendered application with icons integrated throughout
```

--------------------------------

### Build and Export Icons (Node.js)

Source: https://github.com/green-coder/vrac-phosphor-icons/blob/main/phosphor-icons-exporter/README.md

Installs dependencies, builds the project, and then runs the Node.js script to export Phosphor icons to Vrac components. The output is directed to a specified directory.

```bash
npm install
npm run build

# outputs to ".." by default
node out/main.js <target-directory>
```

--------------------------------

### Using Phosphor Icons in Vrac (Clojure)

Source: https://github.com/green-coder/vrac-phosphor-icons/blob/main/README.md

Demonstrates how to require and use Phosphor icons as Vrac components. It shows examples of rendering different icon styles (regular, duotone, fill) and applying inline styles or size attributes. Dependencies include 'vrac.web' and 'phosphor.icon'.

```clojure
(require '[vrac.web :refer [$]])
(require '[phosphor.icon :as pi])

($ pi/heart {:style {:color "red"}})
($ pi/heart-duotone {:style {:color "red"}})
($ pi/heart-fill {:width "2em"
                  :height "2em"})
```

--------------------------------

### Raw SVG String Access and Rendering in Vrac

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

Provides examples of accessing raw SVG icon strings from the `phosphor.icon-svg` namespace and rendering them as DOM elements within a Vrac application. This method is useful for advanced customization, combining SVGs, or integrating with non-Vrac components.

```clojurescript
(ns my-app.core
  (:require [vrac.web :as vw :refer [$]]
            [phosphor.icon-svg :as pis]))

;; Access raw SVG string
pis/heart-regular
;; => "<svg xmlns=\"http://www.w3.org/2000/svg" width="256" height="256"...>";;

;; Convert to DOM and render with custom properties
($ (vw/html-text-to-dom pis/heart-regular)
   {:width "3em"
    :height "3em"
    :style {:color "crimson"}})

;; Combine multiple icon SVGs in custom layout
($ :div.icon-group
   ($ (vw/html-text-to-dom pis/heart-fill)
      {:width "2em" :height "2em" :style {:color "red"}})
   ($ (vw/html-text-to-dom pis/star-fill)
      {:width "2em" :height "2em" :style {:color "gold"}}))

;; Returns: Rendered SVG element from raw string
```

--------------------------------

### Project Configuration for Vrac Phosphor Icons (ClojureScript)

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

This section outlines the necessary configuration for using Vrac Phosphor Icons in a ClojureScript project. It includes dependency management in `deps.edn` and build configuration in `shadow-cljs.edn`, emphasizing tree-shaking for optimized builds. It also shows the required namespace imports for icons and SVG strings.

```clojure
;; deps.edn - Add library dependency
{:paths ["src" "resources"]
 :deps {taipei.404.vrac/phosphor-icons {:mvn/version "0.1.0"}
        taipei.404.vrac/vrac {:mvn/version "0.1.2"}
        org.clojure/clojurescript {:mvn/version "1.12.42"}}}

;; shadow-cljs.edn - Configure build for tree shaking
{:source-paths ["src"]
 :dependencies [[taipei.404.vrac/phosphor-icons "0.1.0"]
                [taipei.404.vrac/vrac "0.1.2"]]
 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"
        :modules {:main {:init-fn my-app.core/start}}
        :compiler-options {:optimizations :advanced}}}}

;; Namespace imports
(ns my-app.core
  (:require [vrac.web :as vw :refer [$]]
            [phosphor.icon :as pi]           ;; Icon components
            [phosphor.icon-svg :as pis]))    ;; Raw SVG strings

;; Build release (includes only used icons via tree shaking)
;; npx shadow-cljs release app
;; Result: ~32KB gzipped including framework + icons
```

--------------------------------

### Run Export Script (Node.js)

Source: https://github.com/green-coder/vrac-phosphor-icons/blob/main/phosphor-icons-exporter/README.md

Executes the main Node.js script to export icons. It takes a target directory as an argument and outputs the Vrac components. This is used for both development and building.

```bash
# outputs to ".." by default
node out/main.js <target-directory>
```

--------------------------------

### Iterating Icon Collections with Raw SVG Strings

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

Shows how to access collections of raw SVG icon strings for specific styles (regular, duotone, fill) and render them dynamically as DOM elements using Vrac's `html-text-to-dom` function. This enables batch rendering and custom styling of multiple icons.

```clojurescript
(ns my-app.core
  (:require [vrac.web :as vw :refer [$]]
            [phosphor.icon-svg :as pis]))

;; Display first 50 regular style icons
(for [svg-str (take 50 pis/all-icons-regular)]
  ($ (vw/html-text-to-dom svg-str)
     {:class ["icon"]
      :width "1.5em"
      :height "1.5em"}))

;; Display first 50 duotone style icons
(for [svg-str (take 50 pis/all-icons-duotone)]
  ($ (vw/html-text-to-dom svg-str)
     {:class ["icon"]
      :width "1.5em"
      :height "1.5em"}))

;; Display first 50 fill style icons
(for [svg-str (take 50 pis/all-icons-fill)]
  ($ (vw/html-text-to-dom svg-str)
     {:class ["icon"]
      :width "1.5em"
      :height "1.5em"}))

;; Returns: Collection of rendered SVG icons
```

--------------------------------

### Icon Style Variants in Vrac

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

Demonstrates how to access and use different visual weights and styles (thin, light, regular, bold, fill, duotone) for Phosphor icons within a Vrac application. Icons can be rendered individually or in collections with custom styling.

```clojurescript
(ns my-app.core
  (:require [vrac.web :refer [$]]
            [phosphor.icon :as pi]))

;; All style variants for the same icon
($ pi/heart-thin)      ;; Thinnest stroke weight
($ pi/heart-light)     ;; Light stroke weight
($ pi/heart)           ;; Regular stroke weight (default)
($ pi/heart-bold)      ;; Bold stroke weight
($ pi/heart-duotone)   ;; Two-tone style
($ pi/heart-fill)      ;; Filled solid style

;; Using in a list with styling
(for [icon [pi/star-thin pi/star pi/star-bold pi/star-fill]]
  ($ icon {:style {:color "#FFD700" :margin "0.5em"}}))

;; Returns: Rendered icons with visual style variants
```

--------------------------------

### Basic Icon Component Usage with Vrac

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

Renders Phosphor icons as Vrac components with default size and class. Allows for styling and custom sizing by passing attributes to the component. Supports automatic integration with Vrac's component system.

```clojurescript
(ns my-app.core
  (:require [vrac.web :refer [$]]
            [phosphor.icon :as pi]))

;; Basic icon usage with default size (1em x 1em)
($ pi/heart)

;; Icon with CSS styling
($ pi/heart {:style {:color "red"}})

;; Icon with custom size
($ pi/heart {:width "2em" :height "2em"})

;; Returns: SVG element with class="icon" rendered at specified size
```

--------------------------------

### Custom Icon Sizing in Vrac

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

Illustrates how to control the dimensions of Phosphor icons rendered as Vrac components using standard HTML/CSS size properties like 'em' or 'px'. This allows for precise scaling of icons to fit different UI designs.

```clojurescript
(ns my-app.core
  (:require [vrac.web :refer [$]]
            [phosphor.icon :as pi]))

;; Small icon (1em - default)
($ pi/github-logo {:width "1em" :height "1em"})

;; Medium icon
($ pi/github-logo {:width "2em" :height "2em"})

;; Large icon
($ pi/github-logo {:width "4em" :height "4em"})

;; Extra large icon
($ pi/github-logo {:width "8em" :height "8em"})

;; Using CSS pixels
($ pi/github-logo {:width "32px" :height "32px"})

;; Returns: Rendered SVG scaled to specified dimensions
```

--------------------------------

### Create Custom Icon Component from SVG String (Clojure)

Source: https://context7.com/green-coder/vrac-phosphor-icons/llms.txt

This snippet shows how to create a reusable icon component by wrapping a raw SVG string. It utilizes vrac.web and phosphor.icon libraries. The function takes an SVG string and returns a component that can be used with props for styling and sizing. It's a fundamental pattern for creating custom icons.

```clojure
(ns my-app.core
  (:require [vrac.web :as vw :refer [$]]
            [phosphor.icon :as pi]
            [phosphor.icon-svg :as pis]))

;; The icon-component function wraps SVG strings
;; (this is how all built-in components are created)
(defn icon-component [svg-str]
  (fn [props] 
    ($ (vw/html-text-to-dom svg-str)
       {:class ["icon"]
        :width "1em"
        :height "1em"}
       props)))

;; Create custom icon component
(def my-custom-heart (icon-component pis/heart-fill))

;; Use like any other icon component
($ my-custom-heart {:style {:color "pink"}})
($ my-custom-heart {:width "3em" :height "3em"})

;; Returns: Reusable icon component with default behavior
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.