@swiftbrowser/web 0.1.0 → 0.3.0

package/src/symbols.ts

@@ -14,9 +14,18 @@
 
 import {
   Accessibility,
+  Activity,
+  Airplay,
+  ALargeSmall,
   AlarmClock,
   Archive,
+  ArrowBigDown,
+  ArrowBigLeft,
+  ArrowBigRight,
+  ArrowBigUp,
   ArrowDown,
+  ArrowDownLeft,
+  ArrowDownRight,
   ArrowDownToLine,
   ArrowLeft,
   ArrowLeftRight,
@@ -24,35 +33,64 @@ import {
   ArrowUp,
   ArrowUpDown,
   ArrowUpFromLine,
+  ArrowUpLeft,
   ArrowUpRight,
   AtSign,
+  AudioWaveform,
+  Award,
+  BadgeCheck,
+  BadgeQuestionMark,
+  Ban,
+  Bandage,
+  Banknote,
+  Barcode,
   Battery,
+  BatteryFull,
+  BatteryLow,
+  BatteryMedium,
+  BatteryWarning,
+  BedDouble,
   Bell,
+  BellDot,
+  BellOff,
   Bike,
+  Bird,
+  Bitcoin,
   Bluetooth,
+  Bold,
+  CaseSensitive,
   Book,
-  BookOpen,
   Bookmark,
+  BookOpen,
+  Brain,
   Briefcase,
+  BriefcaseMedical,
   Bug,
   Building,
   Bus,
+  Cake,
   Calendar,
+  CalendarClock,
+  CalendarPlus,
+  CalendarX,
   Camera,
   Car,
+  Carrot,
+  Cat,
   ChartBar,
+  ChartColumn,
   ChartLine,
   ChartPie,
   Check,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
-  ChevronUp,
   ChevronsDown,
   ChevronsLeft,
   ChevronsRight,
   ChevronsUp,
   ChevronsUpDown,
+  ChevronUp,
   Circle,
   CircleAlert,
   CircleArrowDown,
@@ -60,152 +98,326 @@ import {
   CircleArrowRight,
   CircleArrowUp,
   CircleCheck,
+  CircleDollarSign,
   CircleDot,
   CircleEllipsis,
   CircleMinus,
   CirclePause,
   CirclePlay,
   CirclePlus,
-  CircleStop,
   CircleQuestionMark,
+  CircleStop,
   CircleUser,
   CircleX,
+  Clapperboard,
   Clipboard,
+  ClipboardList,
   Clock,
+  ClockCheck,
   Cloud,
+  CloudDownload,
+  CloudDrizzle,
+  CloudFog,
+  CloudHail,
   CloudLightning,
   CloudMoon,
   CloudRain,
+  CloudRainWind,
   CloudSnow,
   CloudSun,
+  CloudUpload,
   Code,
+  Coffee,
   Cog,
+  Columns2,
+  Command,
   Compass,
+  Contact,
   Copy,
+  CornerDownLeft,
   CreditCard,
+  Crop,
+  Cross,
   Crown,
+  Database,
+  Delete,
+  Diamond,
+  Dices,
+  Dog,
+  DollarSign,
   Download,
   Droplet,
+  Droplets,
+  Dumbbell,
+  Earth,
   Ellipsis,
+  Euro,
   Eye,
   EyeOff,
   FaceSlightlySmiling,
   File,
+  FilePlus,
   FileText,
+  Film,
+  Fingerprint,
+  Fish,
   Flag,
   Flame,
   Folder,
+  FolderMinus,
+  FolderPlus,
+  Forward,
+  Fuel,
   Funnel,
+  GalleryVerticalEnd,
   Gamepad2,
+  Gauge,
   Gift,
+  GitBranch,
+  GitMerge,
+  Glasses,
   Globe,
   GraduationCap,
+  Grid3x3,
+  Hammer,
   Hand,
-  Hourglass,
+  HardDrive,
+  Hash,
   Headphones,
   Heart,
+  HeartOff,
+  Hexagon,
+  Highlighter,
+  History,
+  Hourglass,
   House,
+  IdCard,
   Image,
+  Images,
   Inbox,
+  Infinity,
   Info,
+  Italic,
+  JapaneseYen,
   Key,
   Keyboard,
+  Landmark,
   Laptop,
+  Lasso,
+  Layers,
+  Layers3,
+  LayoutGrid,
+  LayoutList,
   Leaf,
+  Library,
   Lightbulb,
   Link,
+  Link2,
   List,
   ListChecks,
+  ListIndentIncrease,
+  ListMusic,
   ListOrdered,
   LoaderCircle,
+  LocateFixed,
   Lock,
   LockOpen,
   LogIn,
   LogOut,
   Mail,
+  MailOpen,
+  MailWarning,
   Map,
   MapPin,
+  MapPinOff,
+  Maximize2,
+  Medal,
   Menu,
   MessageCircle,
   MessageSquare,
+  MessageSquareMore,
+  MessageSquarePlus,
+  MessageSquareQuote,
+  MessageSquareText,
+  MessageSquareWarning,
+  MessagesSquare,
   Mic,
   MicOff,
+  MicVocal,
+  Minimize2,
   Minus,
   Monitor,
+  MonitorPlay,
   Moon,
+  Mountain,
   Music,
+  Navigation2,
+  Network,
+  Newspaper,
+  Octagon,
+  OctagonAlert,
+  OctagonX,
+  Option,
   Package,
+  Paintbrush,
+  Palette,
+  PanelLeft,
+  PanelRight,
   Paperclip,
   Pause,
+  PawPrint,
   Pencil,
+  PencilOff,
+  PenTool,
+  Percent,
+  PersonStanding,
   Phone,
+  PhoneIncoming,
+  PhoneOff,
+  PhoneOutgoing,
+  Pill,
   Pin,
+  Pipette,
   Plane,
   Play,
   Plus,
+  Pointer,
+  PoundSterling,
   Power,
   Printer,
+  Puzzle,
   QrCode,
+  Rabbit,
+  Radio,
+  RectangleHorizontal,
+  RectangleVertical,
+  Redo2,
   RefreshCw,
   Repeat,
+  Reply,
+  ReplyAll,
   RotateCcw,
   RotateCw,
+  Rows2,
+  Ruler,
+  Sailboat,
+  Scan,
+  ScanBarcode,
+  ScanFace,
+  ScanQrCode,
+  School,
+  Scissors,
   Search,
   Send,
+  Server,
   Settings,
+  Shapes,
   Share,
+  Share2,
   Shield,
   ShieldCheck,
+  Ship,
   ShoppingBag,
+  ShoppingBasket,
   ShoppingCart,
   Shuffle,
+  Sigma,
+  Signal,
+  Signpost,
   SkipBack,
   SkipForward,
   SlidersHorizontal,
   Smartphone,
+  Snowflake,
+  Sparkle,
   Sparkles,
   Speaker,
   Square,
+  SquareArrowDown,
+  SquareArrowLeft,
+  SquareArrowOutUpRight,
+  SquareArrowRight,
+  SquareArrowUp,
   SquareCheck,
+  SquareMinus,
+  SquareParking,
   SquarePen,
+  SquarePlay,
+  SquarePlus,
+  SquareUser,
+  SquareX,
   Star,
+  StarHalf,
+  StarOff,
+  Stethoscope,
+  StickyNote,
+  Store,
+  Strikethrough,
   Sun,
+  SunDim,
+  Sunrise,
+  Sunset,
+  SwitchCamera,
   Tag,
   Target,
+  Tent,
   Terminal,
-  Timer,
+  TextAlignCenter,
+  TextAlignEnd,
+  TextAlignJustify,
+  TextAlignStart,
+  Thermometer,
+  ThumbsDown,
   ThumbsUp,
+  Ticket,
+  Timer,
+  Tornado,
+  TrainFront,
+  TramFront,
   Trash,
-  TriangleAlert,
+  Trash2,
+  TreeDeciduous,
+  TrendingDown,
   TrendingUp,
+  Triangle,
+  TriangleAlert,
   Trophy,
+  Truck,
+  Turtle,
   Tv,
   Type,
+  Umbrella,
+  Underline,
+  Undo2,
   Upload,
   User,
+  UserCheck,
+  UserMinus,
+  UserPlus,
   Users,
+  UserX,
+  Utensils,
+  Video,
+  VideoOff,
   Volume,
   Volume1,
   Volume2,
   VolumeX,
   Wallet,
+  WandSparkles,
   Watch,
   Wifi,
+  WifiOff,
   Wind,
+  Wine,
   Wrench,
   X,
   Zap,
+  ZapOff,
   ZoomIn,
   ZoomOut,
   createElement,
   type IconNode,
-  Grid3x3,
-  LayoutGrid,
-  LayoutList,
-  MessageSquarePlus,
-  MessageSquareText,
-  Truck,
-  Utensils,
 } from 'lucide';
 
 /** How a glyph is painted; see the file comment. */
@@ -216,6 +428,41 @@ export interface SymbolGlyph {
   fill: GlyphFill;
 }
 
+/**
+ * The activity indicator (an indeterminate `ProgressView`), as iOS draws it:
+ * eight rounded spokes filling the glyph, the leading one (at the top) at full
+ * strength and the three behind it fading out to the rest's 0.31. styles.css
+ * steps that ramp around the spokes clockwise (the glyph itself stays still),
+ * so the fade trails the leading spoke.
+ */
+const ACTIVITY_INDICATOR: IconNode = [
+  ['line', { x1: '12', y1: '6.21', x2: '12', y2: '1.52', 'stroke-width': '3.05', 'stroke-opacity': '1' }],
+  ['line', { x1: '16.09', y1: '7.91', x2: '19.41', y2: '4.59', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '17.79', y1: '12', x2: '22.48', y2: '12', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '16.09', y1: '16.09', x2: '19.41', y2: '19.41', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '12', y1: '17.79', x2: '12', y2: '22.48', 'stroke-width': '3.05', 'stroke-opacity': '0.31' }],
+  ['line', { x1: '7.91', y1: '16.09', x2: '4.59', y2: '19.41', 'stroke-width': '3.05', 'stroke-opacity': '0.49' }],
+  ['line', { x1: '6.21', y1: '12', x2: '1.52', y2: '12', 'stroke-width': '3.05', 'stroke-opacity': '0.66' }],
+  ['line', { x1: '7.91', y1: '7.91', x2: '4.59', y2: '4.59', 'stroke-width': '3.05', 'stroke-opacity': '0.83' }],
+];
+
+/** `books.vertical.fill`: three upright books and a leaning one, as solid shapes. */
+const BOOKS_VERTICAL_FILL: IconNode = [
+  ['rect', { x: '1.5', y: '3', width: '5', height: '18', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '7.5', y: '3', width: '5', height: '18', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '13.5', y: '5', width: '4', height: '16', rx: '1.2', stroke: 'none' }],
+  ['rect', { x: '17.8', y: '4.5', width: '4', height: '16', rx: '1.2', stroke: 'none', transform: 'rotate(-14 19.8 12.5)' }],
+];
+
+/** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
+const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
+
+/** `square.on.circle.fill`: a solid square over a solid circle, a gap between them. */
+const SQUARE_ON_CIRCLE_FILL: IconNode = [
+  ['circle', { cx: '9.5', cy: '9.5', r: '7.5' }],
+  ['rect', { x: '9', y: '9', width: '13', height: '13', rx: '3', stroke: KNOCKOUT_COLOR, 'stroke-width': '2.4' }],
+];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -322,7 +569,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'flag.fill': solid(Flag),
   tag: outline(Tag),
   'tag.fill': solid(Tag),
-  textformat: outline(Type),
+  textformat: outline(CaseSensitive),
   'line.3.horizontal': outline(Menu),
   'line.3.horizontal.decrease': outline(Funnel),
   'line.3.horizontal.decrease.circle': outline(Funnel),
@@ -338,7 +585,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
 
   // People and places
   person: outline(User),
-  'person.fill': outline(User),
+  'person.fill': solid(User),
   'person.2': outline(Users),
   'person.circle': outline(CircleUser),
   'person.circle.fill': knockout(CircleUser),
@@ -398,7 +645,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   camera: outline(Camera),
   'camera.fill': outline(Camera),
   photo: outline(Image),
-  'photo.fill': outline(Image),
+  'photo.fill': knockout(Image),
   'photo.on.rectangle': outline(Image),
   play: outline(Play),
   'play.fill': solid(Play),
@@ -458,7 +705,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'doc.text.fill': outline(FileText),
   archivebox: outline(Archive),
   'shippingbox': outline(Package),
-  'shippingbox.fill': outline(Package),
+  'shippingbox.fill': knockout(Package),
 
   // Settings and security
   gear: outline(Settings),
@@ -494,7 +741,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   crown: outline(Crown),
   'crown.fill': solid(Crown),
   trophy: outline(Trophy),
-  'trophy.fill': outline(Trophy),
+  'trophy.fill': solid(Trophy),
 
   // Nature and weather
   'sun.max': outline(Sun),
@@ -517,6 +764,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'circle.grid.3x3': outline(Grid3x3),
   'fork.knife': outline(Utensils),
   'text.bubble': outline(MessageSquareText),
+  'text.bubble.fill': knockout(MessageSquareText),
   'plus.bubble': outline(MessageSquarePlus),
   'box.truck': outline(Truck),
   'list.bullet.below.rectangle': outline(LayoutList),
@@ -548,20 +796,398 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
 
   // Activity
   'rays': outline(LoaderCircle),
+  // An indeterminate ProgressView's spinner (eight spokes; styles.css animates their fade).
+  'progress.indicator': outline(ACTIVITY_INDICATOR),
   'circle.dotted': outline(LoaderCircle),
+
+  // More common symbols: people, documents, arrows, text, shapes, money,
+  // health, travel, weather, nature, media, devices, tools.
+  'bed.double': outline(BedDouble),
+  'bed.double.fill': solid(BedDouble),
+  'qrcode.viewfinder': outline(ScanQrCode),
+  barcode: outline(Barcode),
+  'barcode.viewfinder': outline(ScanBarcode),
+  viewfinder: outline(Scan),
+  'questionmark.diamond': outline(BadgeQuestionMark),
+  'rectangle.on.rectangle': outline(Copy),
+  'rectangle.on.rectangle.angled': outline(GalleryVerticalEnd),
+  'person.badge.plus': outline(UserPlus),
+  'person.badge.minus': outline(UserMinus),
+  'person.crop.circle.badge.plus': outline(UserPlus),
+  'person.crop.circle.badge.xmark': outline(UserX),
+  'person.crop.circle.badge.checkmark': outline(UserCheck),
+  'person.crop.circle.fill.badge.checkmark': outline(UserCheck),
+  'person.crop.square': outline(SquareUser),
+  'person.crop.square.fill': knockout(SquareUser),
+  'person.2.fill': solid(Users),
+  'person.2.circle': outline(Users),
+  'person.text.rectangle': outline(IdCard),
+  'person.crop.rectangle': outline(Contact),
+  'folder.badge.plus': outline(FolderPlus),
+  'folder.badge.minus': outline(FolderMinus),
+  'doc.badge.plus': outline(FilePlus),
+  'doc.on.doc.fill': outline(Copy),
+  'calendar.badge.plus': outline(CalendarPlus),
+  'calendar.badge.clock': outline(CalendarClock),
+  'calendar.badge.exclamationmark': outline(CalendarX),
+  'clock.arrow.circlepath': outline(History),
+  'clock.badge.checkmark': outline(ClockCheck),
+  'arrow.uturn.backward': outline(Undo2),
+  'arrow.uturn.forward': outline(Redo2),
+  'arrow.uturn.left': outline(Undo2),
+  'arrow.uturn.right': outline(Redo2),
+  'arrow.up.left.and.arrow.down.right': outline(Maximize2),
+  'arrow.down.right.and.arrow.up.left': outline(Minimize2),
+  'arrow.up.right.square': outline(SquareArrowOutUpRight),
+  'arrow.up.forward.app': outline(SquareArrowOutUpRight),
+  'arrow.right.square': outline(SquareArrowRight),
+  'arrow.left.square': outline(SquareArrowLeft),
+  'arrow.up.square': outline(SquareArrowUp),
+  'arrow.down.square': outline(SquareArrowDown),
+  'arrow.triangle.branch': outline(GitBranch),
+  'arrow.triangle.merge': outline(GitMerge),
+  'arrow.triangle.swap': outline(ArrowLeftRight),
+  'arrow.up.and.down': outline(ArrowUpDown),
+  'arrow.left.and.right': outline(ArrowLeftRight),
+  'arrow.down.left': outline(ArrowDownLeft),
+  'arrow.down.right': outline(ArrowDownRight),
+  'arrow.up.left': outline(ArrowUpLeft),
+  'arrowshape.turn.up.left': outline(Reply),
+  'arrowshape.turn.up.right': outline(Forward),
+  'arrowshape.turn.up.left.2': outline(ReplyAll),
+  'arrowshape.left': outline(ArrowBigLeft),
+  'arrowshape.right': outline(ArrowBigRight),
+  'arrowshape.up': outline(ArrowBigUp),
+  'arrowshape.down': outline(ArrowBigDown),
+  'square.on.square': outline(Copy),
+  'square.on.circle': outline(Shapes),
+  'square.on.circle.fill': solid(SQUARE_ON_CIRCLE_FILL),
+  'plus.square': outline(SquarePlus),
+  'plus.square.fill': knockout(SquarePlus),
+  'minus.square': outline(SquareMinus),
+  'minus.square.fill': knockout(SquareMinus),
+  'xmark.square': outline(SquareX),
+  'xmark.square.fill': knockout(SquareX),
+  'plus.app': outline(SquarePlus),
+  'star.circle': outline(Star),
+  'star.leadinghalf.filled': outline(StarHalf),
+  'star.slash': outline(StarOff),
+  'heart.slash': outline(HeartOff),
+  'heart.circle': outline(Heart),
+  'bell.slash': outline(BellOff),
+  'bell.badge': outline(BellDot),
+  'bell.badge.fill': outline(BellDot),
+  'envelope.badge': outline(MailWarning),
+  'envelope.open.fill': outline(MailOpen),
+  'tray.full': outline(Inbox),
+  'tray.fill': solid(Inbox),
+  'tray.and.arrow.down': outline(Inbox),
+  'tray.and.arrow.up': outline(Inbox),
+  'phone.arrow.up.right': outline(PhoneOutgoing),
+  'phone.arrow.down.left': outline(PhoneIncoming),
+  'phone.down': outline(PhoneOff),
+  video: outline(Video),
+  'video.fill': solid(Video),
+  'video.slash': outline(VideoOff),
+  'bubble.left.and.bubble.right': outline(MessagesSquare),
+  'bubble.left.and.bubble.right.fill': outline(MessagesSquare),
+  'bubble.right': outline(MessageSquare),
+  'bubble.left.fill': solid(MessageSquare),
+  'quote.bubble': outline(MessageSquareQuote),
+  'ellipsis.bubble': outline(MessageSquareMore),
+  'exclamationmark.bubble': outline(MessageSquareWarning),
+  'text.alignleft': outline(TextAlignStart),
+  'text.aligncenter': outline(TextAlignCenter),
+  'text.alignright': outline(TextAlignEnd),
+  'text.justify': outline(TextAlignJustify),
+  bold: outline(Bold),
+  italic: outline(Italic),
+  underline: outline(Underline),
+  strikethrough: outline(Strikethrough),
+  'textformat.size': outline(ALargeSmall),
+  character: outline(Type),
+  'list.dash': outline(List),
+  'list.bullet.indent': outline(ListIndentIncrease),
+  'list.clipboard': outline(ClipboardList),
+  'square.grid.3x3': outline(Grid3x3),
+  'square.grid.2x2.fill': solid(LayoutGrid),
+  'rectangle.grid.1x2': outline(Rows2),
+  'rectangle.split.2x1': outline(Columns2),
+  'sidebar.left': outline(PanelLeft),
+  'sidebar.right': outline(PanelRight),
+  'rectangle.stack': outline(Layers),
+  'square.stack': outline(Layers),
+  'square.stack.3d.up': outline(Layers3),
+  rectangle: outline(RectangleHorizontal),
+  'rectangle.fill': solid(RectangleHorizontal),
+  'rectangle.portrait': outline(RectangleVertical),
+  triangle: outline(Triangle),
+  'triangle.fill': solid(Triangle),
+  diamond: outline(Diamond),
+  'diamond.fill': solid(Diamond),
+  hexagon: outline(Hexagon),
+  'hexagon.fill': solid(Hexagon),
+  octagon: outline(Octagon),
+  'checkmark.seal': outline(BadgeCheck),
+  'checkmark.seal.fill': knockout(BadgeCheck),
+  'xmark.octagon': outline(OctagonX),
+  'xmark.octagon.fill': outline(OctagonX),
+  'exclamationmark.octagon': outline(OctagonAlert),
+  nosign: outline(Ban),
+  'slash.circle': outline(Ban),
+  number: outline(Hash),
+  percent: outline(Percent),
+  dollarsign: outline(DollarSign),
+  'dollarsign.circle': outline(CircleDollarSign),
+  'dollarsign.circle.fill': knockout(CircleDollarSign),
+  eurosign: outline(Euro),
+  sterlingsign: outline(PoundSterling),
+  yensign: outline(JapaneseYen),
+  bitcoinsign: outline(Bitcoin),
+  banknote: outline(Banknote),
+  basket: outline(ShoppingBasket),
+  storefront: outline(Store),
+  'building.columns': outline(Landmark),
+  ticket: outline(Ticket),
+  'chart.bar.fill': outline(ChartBar),
+  'chart.bar.xaxis': outline(ChartColumn),
+  'chart.line.downtrend.xyaxis': outline(TrendingDown),
+  waveform: outline(AudioWaveform),
+  'waveform.path.ecg': outline(Activity),
+  cross: outline(Cross),
+  'cross.case': outline(BriefcaseMedical),
+  pills: outline(Pill),
+  bandage: outline(Bandage),
+  stethoscope: outline(Stethoscope),
+  brain: outline(Brain),
+  'brain.head.profile': outline(Brain),
+  'figure.stand': outline(PersonStanding),
+  dumbbell: outline(Dumbbell),
+  tram: outline(TramFront),
+  'train.side.front.car': outline(TrainFront),
+  ferry: outline(Ship),
+  sailboat: outline(Sailboat),
+  fuelpump: outline(Fuel),
+  parkingsign: outline(SquareParking),
+  tent: outline(Tent),
+  'mountain.2': outline(Mountain),
+  tree: outline(TreeDeciduous),
+  thermometer: outline(Thermometer),
+  'thermometer.medium': outline(Thermometer),
+  umbrella: outline(Umbrella),
+  snowflake: outline(Snowflake),
+  'sun.min': outline(SunDim),
+  sunrise: outline(Sunrise),
+  sunset: outline(Sunset),
+  'cloud.drizzle': outline(CloudDrizzle),
+  'cloud.fog': outline(CloudFog),
+  'cloud.heavyrain': outline(CloudRainWind),
+  'cloud.hail': outline(CloudHail),
+  tornado: outline(Tornado),
+  humidity: outline(Droplets),
+  pawprint: outline(PawPrint),
+  hare: outline(Rabbit),
+  tortoise: outline(Turtle),
+  fish: outline(Fish),
+  bird: outline(Bird),
+  // The Swift logo: a bird in flight.
+  swift: outline(Bird),
+  cat: outline(Cat),
+  dog: outline(Dog),
+  carrot: outline(Carrot),
+  'cup.and.saucer': outline(Coffee),
+  mug: outline(Coffee),
+  wineglass: outline(Wine),
+  'birthday.cake': outline(Cake),
+  film: outline(Film),
+  'film.stack': outline(Clapperboard),
+  'camera.rotate': outline(SwitchCamera),
+  'photo.stack': outline(Images),
+  'photo.on.rectangle.angled': outline(Images),
+  'music.note.list': outline(ListMusic),
+  'music.mic': outline(MicVocal),
+  radio: outline(Radio),
+  airplayaudio: outline(Airplay),
+  airplayvideo: outline(Airplay),
+  'play.rectangle': outline(MonitorPlay),
+  'play.square': outline(SquarePlay),
+  icloud: outline(Cloud),
+  'icloud.fill': solid(Cloud),
+  'icloud.and.arrow.up': outline(CloudUpload),
+  'icloud.and.arrow.down': outline(CloudDownload),
+  externaldrive: outline(HardDrive),
+  'server.rack': outline(Server),
+  cylinder: outline(Database),
+  network: outline(Network),
+  faceid: outline(ScanFace),
+  touchid: outline(Fingerprint),
+  'lock.shield': outline(ShieldCheck),
+  'hand.tap': outline(Pointer),
+  'hand.wave': outline(Hand),
+  'hand.thumbsdown': outline(ThumbsDown),
+  'hand.thumbsdown.fill': solid(ThumbsDown),
+  eyeglasses: outline(Glasses),
+  sparkle: outline(Sparkle),
+  'wand.and.stars': outline(WandSparkles),
+  paintbrush: outline(Paintbrush),
+  paintpalette: outline(Palette),
+  'pencil.tip': outline(PenTool),
+  'pencil.slash': outline(PencilOff),
+  highlighter: outline(Highlighter),
+  scissors: outline(Scissors),
+  ruler: outline(Ruler),
+  eyedropper: outline(Pipette),
+  lasso: outline(Lasso),
+  crop: outline(Crop),
+  gauge: outline(Gauge),
+  speedometer: outline(Gauge),
+  hammer: outline(Hammer),
+  puzzlepiece: outline(Puzzle),
+  dice: outline(Dices),
+  newspaper: outline(Newspaper),
+  'books.vertical': outline(Library),
+  'books.vertical.fill': solid(BOOKS_VERTICAL_FILL),
+  'note.text': outline(StickyNote),
+  note: outline(StickyNote),
+  'location.circle': outline(LocateFixed),
+  'location.north': outline(Navigation2),
+  'location.slash': outline(MapPinOff),
+  'signpost.right': outline(Signpost),
+  'globe.americas': outline(Earth),
+  'globe.europe.africa': outline(Earth),
+  'bolt.slash': outline(ZapOff),
+  'battery.25': outline(BatteryLow),
+  'battery.50': outline(BatteryMedium),
+  'battery.75': outline(BatteryFull),
+  'battery.0': outline(BatteryWarning),
+  'wifi.slash': outline(WifiOff),
+  cellularbars: outline(Signal),
+  infinity: outline(Infinity),
+  sum: outline(Sigma),
+  command: outline(Command),
+  option: outline(Option),
+  'delete.left': outline(Delete),
+  return: outline(CornerDownLeft),
+  'xmark.bin': outline(Trash2),
+  'square.and.arrow.up.on.square': outline(Share2),
+  'link.badge.plus': outline(Link2),
+  'shippingbox.circle': outline(Package),
+  'graduationcap.fill': solid(GraduationCap),
+  medal: outline(Medal),
+  rosette: outline(Award),
+  'gift.circle': outline(Gift),
+  studentdesk: outline(School),
 };
 
-/** Number of SF Symbol names the renderer can draw. */
+/** Number of SF Symbol names the map lists (more resolve as variants, see `lookupSymbol`). */
 export const SF_SYMBOL_COUNT = Object.keys(SF_SYMBOLS).length;
 
 export function lookupSymbol(systemName: string): SymbolGlyph | undefined {
-  return SF_SYMBOLS[systemName];
+  const exact = SF_SYMBOLS[systemName];
+  if (exact) return exact;
+  if (!(systemName in variants)) variants[systemName] = resolveVariant(systemName) ?? null;
+  return variants[systemName] ?? undefined;
+}
+
+/** Resolved variants (null: none); an object because lucide's `Map` icon shadows the global. */
+const variants: Record<string, SymbolGlyph | null> = Object.create(null);
+
+/** Shapes that alone would stand in for too much (`circle.grid.2x2` is not a circle). */
+const GENERIC_SHAPES = new Set(['circle', 'square', 'rectangle', 'app', 'capsule', 'triangle', 'diamond', 'hexagon', 'octagon', 'seal', 'shield']);
+
+/**
+ * A name the map does not list is drawn as the closest listed one: SF Symbol
+ * names extend a base with modifiers, so `person.crop.circle.badge.xmark`
+ * is drawn as `person.crop.circle`, `trash.circle.fill` as `trash.fill` and
+ * `speaker.wave.2.fill` as `speaker.wave.2`. A `.badge…` suffix is dropped,
+ * then trailing parts one at a time; a name with `.fill` tries every filled
+ * form first. A `.slash` variant is never drawn as its base, which would
+ * mean the opposite (`bell.slash` is "notifications off"); nor is a name
+ * drawn as a bare shape. Unresolved names get the caller's placeholder.
+ */
+function resolveVariant(systemName: string): SymbolGlyph | undefined {
+  let parts = systemName.split('.');
+  if (parts.includes('slash')) return undefined;
+  const fill = parts.includes('fill');
+  parts = parts.filter((part) => part !== 'fill');
+  const badge = parts.indexOf('badge');
+  if (badge > 0) parts = parts.slice(0, badge);
+  // `trash.circle`, `arrow.down.circle.fill`, `heart.square.fill`: the base
+  // glyph inside the enclosure (drawn whole, or filled with the glyph
+  // knocked out), unless the table lists the full name's base form.
+  const enclosure = parts.at(-1);
+  if ((enclosure === 'circle' || enclosure === 'square') && parts.length > 1) {
+    const listed = SF_SYMBOLS[parts.join('.')];
+    if (listed) {
+      // The listed outline form, its enclosure filled (`arrow.down.circle.fill`).
+      if (fill && enclosingShapeIndex(listed.icon) >= 0) return { icon: listed.icon, fill: 'knockout' };
+    } else {
+      const base = parts.slice(0, -1).join('.');
+      const glyph = GENERIC_SHAPES.has(base) ? undefined : lookupSymbol(base);
+      if (glyph) return enclosed(glyph.icon, enclosure, fill);
+    }
+  }
+  const bases: string[] = [];
+  for (let length = parts.length; length > 0; length--) {
+    const base = parts.slice(0, length).join('.');
+    if (length === 1 && parts.length > 1 && GENERIC_SHAPES.has(base)) break;
+    bases.push(base);
+  }
+  // A filled form at any length before an outline: `heart.circle.fill` is
+  // closer to `heart.fill` than to `heart.circle`.
+  const candidates = fill ? [...bases.map((base) => `${base}.fill`), ...bases] : bases;
+  for (const name of candidates) {
+    const glyph = SF_SYMBOLS[name];
+    if (glyph) return glyph;
+  }
+  return undefined;
+}
+
+/**
+ * `icon` at 55% inside a circle or rounded square: outlined (`X.circle`), or
+ * filled with the glyph knocked out of it (`X.circle.fill`), as SF Symbols
+ * draw their enclosed forms.
+ */
+function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean): SymbolGlyph {
+  const outer: IconNode[number] =
+    enclosure === 'circle' ? ['circle', { cx: '12', cy: '12', r: '10' }] : ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '4' }];
+  // Scaled about the center; the stroke is widened to keep its weight.
+  const inner = icon.map(([tag, attrs]) => [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3' }] as IconNode[number]);
+  return { icon: [outer, ...inner], fill: fill ? 'knockout' : 'outline' };
+}
+
+/**
+ * The name of the filled form of `systemName` when the table can draw one
+ * (`house` → `house.fill`), else the name itself: a tab bar shows its items'
+ * symbols filled, as iOS does (`symbolVariants` `.fill`).
+ */
+export function filledSymbolName(systemName: string): string {
+  if (systemName.split('.').includes('fill')) return systemName;
+  const filled = `${systemName}.fill`;
+  const glyph = lookupSymbol(filled);
+  return glyph && glyph.fill !== 'outline' ? filled : systemName;
 }
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
-/** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
-const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
+/**
+ * The shape a `knockout` glyph fills: the enclosing circle or rectangle
+ * (lucide lists it first in most glyphs but not all: `CirclePlay` starts
+ * with its triangle), else the first shape.
+ */
+export function outerShapeIndex(icon: IconNode): number {
+  const index = enclosingShapeIndex(icon);
+  return index >= 0 ? index : 0;
+}
+
+/** The index of the circle or rectangle enclosing `icon`'s other marks, or -1. */
+function enclosingShapeIndex(icon: IconNode): number {
+  return icon.findIndex(([tag, attrs]) => {
+    const n = (key: string): number => Number(attrs[key] ?? 0);
+    return (tag === 'circle' && n('r') >= 9) || (tag === 'rect' && n('width') >= 16 && n('height') >= 12);
+  });
+}
+
 
 /**
  * Build the `<svg>` for a symbol. Returns `null` for unknown names; the
@@ -584,12 +1210,16 @@ export function renderSymbol(systemName: string): SVGElement | null {
       shape.setAttribute('fill', 'currentColor');
     }
   } else if (glyph.fill === 'knockout') {
-    const [outer, ...inner] = Array.from(svg.children);
-    outer?.setAttribute('fill', 'currentColor');
-    for (const mark of inner) {
-      mark.setAttribute('stroke', KNOCKOUT_COLOR);
-      mark.setAttribute('fill', 'none');
-    }
+    const shapes = Array.from(svg.children);
+    const outer = outerShapeIndex(glyph.icon);
+    shapes.forEach((shape, index) => {
+      if (index === outer) {
+        shape.setAttribute('fill', 'currentColor');
+      } else {
+        shape.setAttribute('stroke', KNOCKOUT_COLOR);
+        shape.setAttribute('fill', 'none');
+      }
+    });
   }
   return svg;
 }