SwiftUI

The Swift package draws with SwiftUI on Apple platforms. This website can’t run SwiftUI; the icons you see here are the web packages playing the same motion.

Installation

Xcode → File → Add Package Dependencies → https://github.com/CityPulso/PulsoIcon.git. Or in Package.swift:

.package(url: "https://github.com/CityPulso/PulsoIcon.git", from: "<version>"),
// and in your target:
.product(name: "PulsoIcon", package: "PulsoIcon"),

Use the newest release tag. iOS 17, macOS 14, tvOS 17, watchOS 10 or visionOS 1.

Quick start

import PulsoIcon
import SwiftUI

Button { /* … */ } label: {
    Label { Text("Notifications") } icon: { PulsoIconView(.bell, size: 20) }
}

Icons are static members of PulsoIcon, named like the React components with a lowercase first letter (.calendar, .trash2, .brandGithub, .aArrowDown), with the same other names and Icon suffixes (.bellIcon).

Outline, solid and static

PulsoIconView(.heart)
PulsoIconView(.heart, solid: true)
PulsoIconView(.heart, animated: false)
PulsoIconView(.heart, solid: true, animated: false)

Button-triggered animation

Taps are the app’s to decide. Use a PulsoIconHandle; startAnimation() and stopAnimation() return when the motion has finished:

struct SaveButton: View {
    @State private var handle = PulsoIconHandle()

    var body: some View {
        Button {
            Task { await handle.startAnimation() }
        } label: {
            PulsoIconView(.check, autoAnimated: false, handle: handle)
        }
    }
}

Play state

PulsoIconView(.bell, autoAnimated: false, play: hasNewMessage)

With autoAnimated (the default), a pointer hovering the icon plays it on iPad, Mac and visionOS.

Icons by name

PulsoIcon.byKey("bell") looks an icon up by the kebab-case name stored on your data, and PulsoIcon.iconNames lists them all.

Accessibility

Pass label: (a Text) to have VoiceOver read the icon; without it the icon is hidden from accessibility. Nothing moves with Reduce Motion on.

API reference

PulsoIconView(_ icon:size:color:strokeWidth:absoluteStrokeWidth:solid:animated:autoAnimated:play:handle:label:)

Parameter	Default	What it does
icon		The icon, e.g. .bell
size	24	Width and height in points
color	foreground style	Stroke colour, and fill colour when solid
strokeWidth	2	Stroke width on the 24-unit grid
absoluteStrokeWidth	false	Keep the stroke the same number of points at any size
solid	false	Filled icon instead of outline
animated	true	false keeps the icon completely still
autoAnimated	true	Play while a pointer hovers the icon
play	nil	true plays the motion, false returns to rest
handle	nil	A PulsoIconHandle, to play it from code
label	nil	Read by VoiceOver; without it the icon is hidden