Skip to main content

Module icons

Module icons 

Source
Expand description

Access to bootstrap-icons.

§Icons

All icons are available as a constant, thanks to the build-executed script:

let icon = BI::HEART;
html!{
    <h1>{"I"} {icon} {BI::GEAR}</h1>
}

§Required CSS

These icons require the inclusion of a CSS file from Bootstrap (bootstrap-icons.css). This file can be added by:

  1. Using BIFiles::cdn() (easiest, see below)
  2. Using BIFiles::copy() - in build-executed code (recommended, see below)
  3. Copying it yourself from the Bootstrap website
  4. Accessing the data via BIFiles::FILES and delivering it yourself

§1. Quickstart - Using CDN

Call BIFiles::cdn() inside the html!{} returned by your application.

This is copies the files to the dist directory, which is recommended.

It is shown in /examples/icons.

A copy of bootstrap-icons is included and should change only rarely. trunk does not add a hash to generated files, and thus a change in those files won’t be detected by trunk.

  1. Cargo.toml

    Add the build-executed binary.

    [[bin]]
    name = "copy-bootstrap-icons"
  2. src/bin/copy-bootstrap-icons.rs

    Create the program to copy the files.

    use std::path::PathBuf;
    use yew_bootstrap::icons::BIFiles;
    
    fn main() -> Result<(), std::io::Error> {
        let path = PathBuf::from(
            std::env::var("TRUNK_STAGING_DIR").expect("Environment variable TRUNK_STAGING_DIR"),
        )
        .join(BIFiles::NAME);
        if !path.is_dir() {
            std::fs::create_dir(&path)?;
        }
        BIFiles::copy(&path)
    }
  3. index.html

    Set base reference, link the required CSS and specify your WASM program1.

    <base data-trunk-public-url />
    <link rel="stylesheet" href="bootstrap-icons-v1.11.3/bootstrap-icons.css" />
    <link data-trunk rel="rust" data-bin="name-of-app" />
  4. Trunk.toml

    Add a hook to run the build-executed program.

    [[hooks]]
    stage = "build"
    command = "cargo"
    command_arguments = ["run", "--bin", "copy-bootstrap-icons"]

  1. Since we’ll be writing a build-executed program, there are now two binaries and trunk needs to know which is your WASM binary. 

Structs§

BI
Represents an bootstrap-icon.
BIFiles
Holds all bootstrap-icons data.