Built-in Icons
cardargus includes several SVG icons for common use cases:
library(cardargus)
# House icon (default for fields with with_icon = TRUE)
icon_house(width = 50, height = 56)
# Building icon
icon_building(width = 50, height = 56)
# Construction icon
icon_construction(width = 50, height = 56)
# Map pin icon
icon_map_pin(width = 50, height = 56)
# Money icon
icon_money(width = 50, height = 56)Using icons in fields
Icons can be added to fields in three ways:
- TRUE: Uses the default house icon
-
Built-in icon function: e.g.,
icon_building() - File path: Any SVG file on your system
fields <- list(
# Default house icon
list(
list(label = "Project", value = "Housing Complex", with_icon = TRUE)
),
# Built-in building icon
list(
list(label = "Building", value = "Tower A",
with_icon = icon_building())
),
# Construction icon
list(
list(label = "Status", value = "Under Construction",
with_icon = icon_construction())
),
# Custom SVG file path
list(
list(label = "Custom", value = "My Item",
with_icon = "/path/to/my_icon.svg")
)
)
card <- svg_card(
title = "PROJECT",
badges_data = list(),
fields = fields,
bg_color = "#3498db"
)Customizing icons
All icons accept customization parameters:
# Custom colors
icon <- icon_house(
width = 60,
height = 70,
stroke_color = "#e74c3c", # Red outline
stroke_width = 3,
fill = "#ffebee" # Light red fill
)
# Building with custom size
building <- icon_building(
width = 40,
height = 48,
stroke_color = "#2c3e50",
fill = "#ecf0f1"
)Bundled Logos
The package includes several SVG logos ready to use:
# List all bundled SVGs
list_bundled_svgs()
#> [1] "gov_pe3.svg" "morar_bem.svg" "seduh.svg" "tree.svg" "example_card.svg"
# Get full path to a logo
path <- get_svg_path("morar_bem.svg")
# Get the SVGs directory
svgs_dir()Using logos in cards
Logos can be file paths or SVG strings:
card <- svg_card(
title = "FAR",
badges_data = list(
list(label = "Units", value = "192", color = "white")
),
fields = list(...),
bg_color = "#fab255",
# Top-right logos (bundled or custom paths)
logos = c(
get_svg_path("morar_bem.svg"),
get_svg_path("seduh.svg"),
"/path/to/my_custom_logo.svg" # Any local file
),
logos_height = 40,
# Bottom-left logos
bottom_logos = c(
get_svg_path("gov_pe3.svg")
),
bottom_logos_height = 35
)Loading external SVGs
Use load_svg_for_embed() to load and resize external SVG
files:
# Load and resize an external SVG
logo_data <- load_svg_for_embed(
svg_path = "path/to/my_logo.svg",
target_height = 50
)
# The result contains:
# - svg_content: The processed SVG string
# - width: Calculated width (maintains aspect ratio)
# - height: The target heightCreating logo rows
For advanced positioning, use the logo row functions:
# Top-right logo row
logo_row <- create_logo_row(
logos = c("logo1.svg", "logo2.svg"),
target_height = 40,
spacing = 15,
card_width = 500,
x_offset = 20,
y_offset = 20
)
# Bottom-left logo row
bottom_row <- create_bottom_logo_row(
logos = c("logo3.svg"),
target_height = 30,
spacing = 10,
x_offset = 20,
card_height = 400,
y_offset = 20
)Custom SVG logos
You can use any SVG string as a logo:
# Create a simple custom logo
my_logo <- '<svg width="50" height="50" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="#3498db"/>
<text x="25" y="30" text-anchor="middle" fill="white" font-size="16">AB</text>
</svg>'
# Use in a card
card <- svg_card(
title = "PROJECT",
logos = list(my_logo),
logos_height = 40,
...
)Summary: How to use icons and logos
| Element | How to specify |
|---|---|
| Default icon | with_icon = TRUE |
| Built-in icon | with_icon = icon_house() |
| Custom SVG file | with_icon = "/path/to/file.svg" |
| Bundled logo | logos = c(get_svg_path("name.svg")) |
| Custom logo file | logos = c("/path/to/logo.svg") |
| SVG string | logos = list('<svg>...</svg>') |