You can use brand_use_logo() to include logos in Shiny apps or in HTML documents produced by
Quarto or R Markdown.
In Shiny apps, logos returned by brand_use_logo() will automatically be
converted into HTML tags using htmltools::as.tags(), so you can include
them directly in your UI code.
library(shiny)
library(bslib)brand <- read_brand_yml()
ui <- page_navbar(
title = tagList(
brand_use_logo(brand, "small"),
"Brand Use Logo Test"
),
nav_panel(
"Page 1",
card(
card_header("My Brand"),
brand_use_logo(brand, "medium", variant = "dark")
)
)
# ... The rest of your app
)
If your brand includes a light/dark variant for a specific size, both images
will be included in the app, but only the appropriate image will be shown
based on the user's system preference of the app's current theme mode if you
are using bslib::input_dark_mode().
To include additional classes or attributes in the <img> tag, you can call
htmltools::as.tags() directly and provide those attributes:
brand <- as_brand_yml(list(
logo = list(
images = list(
"cat-light" = list(
path = "https://placecats.com/louie/300/300",
alt = "A light-colored tabby cat on a purple rug"
),
"cat-dark" = list(
path = "https://placecats.com/millie/300/300",
alt = "A dark-colored cat looking into the camera"
),
"cat-med" = "https://placecats.com/600/600"
),
small = list(light = "cat-light", dark = "cat-dark"),
medium = "cat-med"
)
))brand_use_logo(brand, "small") |>
htmltools::as.tags(class = "my-logo", height = 32)
The same applies to HTML documents produced by Quarto or R Markdown, where
images can be used in-line:
```{r}
brand_use_logo(brand, "small")
```This is my brand's medium sized logo: `r brand_use_logo(brand, "medium")`
Finally, you can use format() to convert the logo to raw HTML or markdown:
cat(format(brand_use_logo(brand, "small", variant = "light")))
#> <img src="https://placecats.com/louie/300/300" alt="A light-colored tabby cat on a purple rug" class="brand-logo"/>cat(format(
brand_use_logo(brand, "medium"),
.format = "markdown",
class = "my-logo",
height = 500
))
#> {.brand-logo .my-logo alt="" height="500"}