import Foundation import SwiftUI // MARK: - FigmaMCP Icons Extensions public extension Image { /// Figma MCP Icons namespace enum FigmaMCP { // MARK: - Icon Collections /// Icons generated from Figma icon components /// These match the comprehensive icon system defined in Figma /// Icons should be provided as PDF vector assets in the asset catalog // MARK: - Navigation & System Icons public static let home = Image("figma-home", bundle: .module) public static let gear = Image("figma-gear", bundle: .module) public static let search = Image("figma-search", bundle: .module) public static let notifications = Image("figma-notifications", bundle: .module) public static let filter = Image("figma-filter", bundle: .module) public static let sliders = Image("figma-sliders", bundle: .module) public static let library = Image("figma-library", bundle: .module) public static let explore = Image("figma-explore", bundle: .module) public static let help = Image("figma-help", bundle: .module) // MARK: - Status & Alert Icons public static let warning = Image("figma-warning", bundle: .module) public static let error = Image("figma-error", bundle: .module) public static let success = Image("figma-success", bundle: .module) public static let info = Image("figma-info", bundle: .module) public static let infoOutline = Image("figma-info-outline", bundle: .module) // MARK: - Media Control Icons public static let play = Image("figma-play", bundle: .module) public static let pause = Image("figma-pause", bundle: .module) public static let stop = Image("figma-stop", bundle: .module) public static let rewind = Image("figma-rewind", bundle: .module) public static let fastForward = Image("figma-fast-forward", bundle: .module) public static let previousTrack = Image("figma-previous-track", bundle: .module) public static let nextTrack = Image("figma-next-track", bundle: .module) public static let `repeat` = Image("figma-repeat", bundle: .module) public static let replay = Image("figma-replay", bundle: .module) public static let shuffle = Image("figma-shuffle", bundle: .module) // MARK: - Audio & Recording Icons public static let headphone = Image("figma-headphone", bundle: .module) public static let microphone = Image("figma-microphone", bundle: .module) public static let volumeOn = Image("figma-volume-on", bundle: .module) public static let volumeOff = Image("figma-volume-off", bundle: .module) public static let volumeDown = Image("figma-volume-down", bundle: .module) public static let volumeMute = Image("figma-volume-mute", bundle: .module) public static let volume0 = Image("figma-volume-0", bundle: .module) public static let radioBroadcast = Image("figma-radio-broadcast", bundle: .module) // MARK: - Media Content Icons public static let camera = Image("figma-camera", bundle: .module) public static let image = Image("figma-image", bundle: .module) public static let video = Image("figma-video", bundle: .module) public static let infinity = Image("figma-infinity", bundle: .module) public static let mobile = Image("figma-mobile", bundle: .module) // MARK: - User & Social Icons public static let userAdd = Image("figma-user-add", bundle: .module) public static let userAdded = Image("figma-user-added", bundle: .module) public static let user = Image("figma-user", bundle: .module) public static let userGroup = Image("figma-user-group", bundle: .module) public static let comment = Image("figma-comment", bundle: .module) public static let share = Image("figma-share", bundle: .module) public static let heart = Image("figma-heart", bundle: .module) public static let heartOutline = Image("figma-heart-outline", bundle: .module) public static let thumbsUp = Image("figma-thumbs-up", bundle: .module) public static let thumbsDown = Image("figma-thumbs-down", bundle: .module) public static let thumbsUpOutline = Image("figma-thumbs-up-outline", bundle: .module) public static let thumbsDownOutline = Image("figma-thumbs-down-outline", bundle: .module) // MARK: - Action Icons public static let plus = Image("figma-plus", bundle: .module) public static let minus = Image("figma-minus", bundle: .module) public static let close = Image("figma-close", bundle: .module) public static let check = Image("figma-check", bundle: .module) public static let send = Image("figma-send", bundle: .module) public static let edit = Image("figma-edit", bundle: .module) public static let trash = Image("figma-trash", bundle: .module) public static let copy = Image("figma-copy", bundle: .module) public static let paste = Image("figma-paste", bundle: .module) public static let duplicate = Image("figma-duplicate", bundle: .module) public static let download = Image("figma-download", bundle: .module) public static let upload = Image("figma-upload", bundle: .module) // MARK: - Navigation Arrows & Chevrons public static let chevronUp = Image("figma-chevron-up", bundle: .module) public static let chevronDown = Image("figma-chevron-down", bundle: .module) public static let chevronLeft = Image("figma-chevron-left", bundle: .module) public static let chevronRight = Image("figma-chevron-right", bundle: .module) public static let arrowUp = Image("figma-arrow-up", bundle: .module) public static let arrowDown = Image("figma-arrow-down", bundle: .module) public static let arrowLeft = Image("figma-arrow-left", bundle: .module) public static let arrowRight = Image("figma-arrow-right", bundle: .module) public static let arrowsLeftRight = Image("figma-arrows-left-right", bundle: .module) public static let caretUp = Image("figma-caret-up", bundle: .module) public static let caretDown = Image("figma-caret-down", bundle: .module) public static let caretLeft = Image("figma-caret-left", bundle: .module) public static let caretRight = Image("figma-caret-right", bundle: .module) public static let triangleUp = Image("figma-triangle-up", bundle: .module) public static let triangleDown = Image("figma-triangle-down", bundle: .module) public static let triangleLeft = Image("figma-triangle-left", bundle: .module) public static let triangleRight = Image("figma-triangle-right", bundle: .module) public static let downRightArrow = Image("figma-down-right-arrow", bundle: .module) // MARK: - Content & Organization Icons public static let bookmark = Image("figma-bookmark", bundle: .module) public static let bookmarkOutline = Image("figma-bookmark-outline", bundle: .module) public static let folder = Image("figma-folder", bundle: .module) public static let listIcon = Image("figma-list-icon", bundle: .module) public static let backList = Image("figma-back-list", bundle: .module) public static let sort = Image("figma-sort", bundle: .module) public static let sortDescending = Image("figma-sort-descending", bundle: .module) public static let sortAscending = Image("figma-sort-ascending", bundle: .module) public static let sortAlphabetical = Image("figma-sort-alphabetical", bundle: .module) public static let sortAlphabeticalReverse = Image("figma-sort-alphabetical-reverse", bundle: .module) public static let grid = Image("figma-grid", bundle: .module) public static let section = Image("figma-section", bundle: .module) public static let pin = Image("figma-pin", bundle: .module) // MARK: - Music & Audio Creation Icons public static let musicNote = Image("figma-music-note", bundle: .module) public static let musicNoteSlash = Image("figma-music-note-slash", bundle: .module) public static let music = Image("figma-music", bundle: .module) public static let musicSlash = Image("figma-music-slash", bundle: .module) public static let waveform = Image("figma-waveform", bundle: .module) public static let create = Image("figma-create", bundle: .module) public static let lyrics = Image("figma-lyrics", bundle: .module) public static let lyricsModel = Image("figma-lyrics-model", bundle: .module) public static let stems = Image("figma-stems", bundle: .module) public static let getStems = Image("figma-get-stems", bundle: .module) public static let stemAdd = Image("figma-stem-add", bundle: .module) public static let stemExtract = Image("figma-stem-extract", bundle: .module) public static let audioFile = Image("figma-audio-file", bundle: .module) public static let crossfade = Image("figma-crossfade", bundle: .module) public static let fadeIn = Image("figma-fade-in", bundle: .module) public static let fadeOut = Image("figma-fade-out", bundle: .module) public static let loop = Image("figma-loop", bundle: .module) public static let vinyl = Image("figma-vinyl", bundle: .module) public static let joinClips = Image("figma-join-clips", bundle: .module) // MARK: - Suno-Specific Icons public static let coverCreate = Image("figma-cover-create", bundle: .module) public static let covers = Image("figma-covers", bundle: .module) public static let remix = Image("figma-remix", bundle: .module) public static let coverMicrophone = Image("figma-cover-microphone", bundle: .module) public static let personaShape = Image("figma-persona-shape", bundle: .module) public static let addPersona = Image("figma-add-persona", bundle: .module) public static let personaCreate = Image("figma-persona-create", bundle: .module) public static let personaSmile = Image("figma-persona-smile", bundle: .module) public static let reuseStyle = Image("figma-reuse-style", bundle: .module) public static let reuseStylesLyrics = Image("figma-reuse-styles-lyrics", bundle: .module) public static let speed = Image("figma-speed", bundle: .module) public static let queue = Image("figma-queue", bundle: .module) public static let playlist = Image("figma-playlist", bundle: .module) // MARK: - Social Platform Icons public static let tiktok = Image("figma-tiktok", bundle: .module) public static let instagram = Image("figma-instagram", bundle: .module) public static let youtube = Image("figma-youtube", bundle: .module) public static let twitterX = Image("figma-twitter-x", bundle: .module) public static let facebook = Image("figma-facebook", bundle: .module) public static let spotify = Image("figma-spotify", bundle: .module) public static let soundcloud = Image("figma-soundcloud", bundle: .module) public static let discord = Image("figma-discord", bundle: .module) public static let reddit = Image("figma-reddit", bundle: .module) // MARK: - Utility Icons public static let eye = Image("figma-eye", bundle: .module) public static let eyeSlash = Image("figma-eye-slash", bundle: .module) public static let chain = Image("figma-chain", bundle: .module) public static let link = Image("figma-link", bundle: .module) public static let cloud = Image("figma-cloud", bundle: .module) public static let lock = Image("figma-lock", bundle: .module) public static let globe = Image("figma-globe", bundle: .module) public static let globeSlash = Image("figma-globe-slash", bundle: .module) public static let mail = Image("figma-mail", bundle: .module) public static let star = Image("figma-star", bundle: .module) public static let starOutline = Image("figma-star-outline", bundle: .module) public static let fourStar = Image("figma-four-star", bundle: .module) public static let crown = Image("figma-crown", bundle: .module) public static let royal = Image("figma-royal", bundle: .module) public static let shield = Image("figma-shield", bundle: .module) public static let shieldPerson = Image("figma-shield-person", bundle: .module) public static let clock = Image("figma-clock", bundle: .module) public static let calendar = Image("figma-calendar", bundle: .module) public static let flag = Image("figma-flag", bundle: .module) public static let bug = Image("figma-bug", bundle: .module) public static let skull = Image("figma-skull", bundle: .module) public static let dice = Image("figma-dice", bundle: .module) public static let dog = Image("figma-dog", bundle: .module) public static let gift = Image("figma-gift", bundle: .module) public static let ticket = Image("figma-ticket", bundle: .module) public static let confetti = Image("figma-confetti", bundle: .module) public static let sparkles = Image("figma-sparkles", bundle: .module) public static let wand = Image("figma-wand", bundle: .module) public static let flash = Image("figma-flash", bundle: .module) public static let gauge = Image("figma-gauge", bundle: .module) public static let workspace = Image("figma-workspace", bundle: .module) // MARK: - Editing & Actions Extended public static let editRedo = Image("figma-edit-redo", bundle: .module) public static let editUndo = Image("figma-edit-undo", bundle: .module) public static let editSparkle = Image("figma-edit-sparkle", bundle: .module) public static let scissors = Image("figma-scissors", bundle: .module) public static let remove = Image("figma-remove", bundle: .module) public static let clear = Image("figma-clear", bundle: .module) public static let rotateLeft = Image("figma-rotate-left", bundle: .module) public static let rotateRight = Image("figma-rotate-right", bundle: .module) public static let rotateReverse = Image("figma-rotate-reverse", bundle: .module) // MARK: - UI Controls public static let checkbox = Image("figma-checkbox", bundle: .module) public static let checkboxOutline = Image("figma-checkbox-outline", bundle: .module) public static let radioButton = Image("figma-radio-button", bundle: .module) public static let radioButtonOutline = Image("figma-radio-button-outline", bundle: .module) public static let moreHorizontal = Image("figma-more-horizontal", bundle: .module) public static let moreVertical = Image("figma-more-vertical", bundle: .module) public static let drag = Image("figma-drag", bundle: .module) public static let dragHorizontal = Image("figma-drag-horizontal", bundle: .module) public static let dragVeritcal = Image("figma-drag-vertical", bundle: .module) public static let expand = Image("figma-expand", bundle: .module) public static let expandContent = Image("figma-expand-content", bundle: .module) public static let collapseContent = Image("figma-collapse-content", bundle: .module) public static let extendLeft = Image("figma-extend-left", bundle: .module) public static let extendRight = Image("figma-extend-right", bundle: .module) // MARK: - Instrument Icons public static let instrumentBackupVocals = Image("figma-instrument-backup-vocals", bundle: .module) public static let instrumentBassGuitar = Image("figma-instrument-bass-guitar", bundle: .module) public static let instrumentBrass = Image("figma-instrument-brass", bundle: .module) public static let instrumentDrums = Image("figma-instrument-drums", bundle: .module) public static let instrumentFx = Image("figma-instrument-fx", bundle: .module) public static let instrumentGuitar = Image("figma-instrument-guitar", bundle: .module) public static let instrumentLeadVocals = Image("figma-instrument-lead-vocals", bundle: .module) public static let instrumentPercussion = Image("figma-instrument-percussion", bundle: .module) public static let instrumentPiano = Image("figma-instrument-piano", bundle: .module) public static let instrumentStrings = Image("figma-instrument-strings", bundle: .module) public static let instrumentSynth = Image("figma-instrument-synth", bundle: .module) public static let instrumentWoodwind = Image("figma-instrument-woodwind", bundle: .module) // MARK: - Media & Gallery public static let photoGallery = Image("figma-photo-gallery", bundle: .module) public static let videoGallery = Image("figma-video-gallery", bundle: .module) public static let clipZoomIn = Image("figma-clip-zoom-in", bundle: .module) public static let clipZoomFit = Image("figma-clip-zoom-fit", bundle: .module) public static let followPlayHead = Image("figma-follow-play-head", bundle: .module) // MARK: - Communication & Sharing Extended public static let mention = Image("figma-mention", bundle: .module) public static let shareArrow = Image("figma-share-arrow", bundle: .module) public static let openWindow = Image("figma-open-window", bundle: .module) public static let embed = Image("figma-embed", bundle: .module) public static let feedback = Image("figma-feedback", bundle: .module) public static let news = Image("figma-news", bundle: .module) // MARK: - Platform & System Icons public static let android = Image("figma-android", bundle: .module) public static let apple = Image("figma-apple", bundle: .module) public static let playstore = Image("figma-playstore", bundle: .module) public static let darkMode = Image("figma-Dark-mode", bundle: .module) public static let lightMode = Image("figma-Light-mode", bundle: .module) public static let auto = Image("figma-auto", bundle: .module) // MARK: - Account & Authentication public static let login = Image("figma-login", bundle: .module) public static let logout = Image("figma-logout", bundle: .module) public static let creditCard = Image("figma-credit-card", bundle: .module) // MARK: - Suno Extended Features public static let genres = Image("figma-genres", bundle: .module) public static let masks = Image("figma-masks", bundle: .module) public static let recentPrompts = Image("figma-recent-prompts", bundle: .module) public static let moveTo = Image("figma-move-to", bundle: .module) public static let learn = Image("figma-learn", bundle: .module) public static let cycle = Image("figma-cycle", bundle: .module) public static let radio = Image("figma-radio", bundle: .module) public static let prohibition = Image("figma-prohibition", bundle: .module) public static let rightAlign = Image("figma-right-align", bundle: .module) } } // MARK: - Icon Styling Extensions public extension Image { /// Apply FigmaMCP icon style with semantic color func figmaMCPIconStyle( size: CGFloat = 24, semanticColor: Color = Color.FigmaMCP.Semantic.foregroundSecondary ) -> some View { self .resizable() .aspectRatio(contentMode: .fit) .frame(width: size, height: size) .foregroundColor(semanticColor) } } // MARK: - Icon Size Tokens public extension Image { enum FigmaMCPSize { /// Standard icon sizes used in the Figma design system public static let small: CGFloat = 16 public static let medium: CGFloat = 24 public static let large: CGFloat = 32 public static let extraLarge: CGFloat = 48 // TODO: Add your specific Figma icon sizes // public static let iconSize1: CGFloat = 20 // public static let iconSize2: CGFloat = 28 } } #if DEBUG // MARK: - Preview Support struct FigmaMCPIconsPreview: View { var body: some View { ScrollView { VStack(alignment: .leading, spacing: 24) { Text("FigmaMCP Icon System") .font(.title) .padding(.bottom) VStack(alignment: .leading, spacing: 16) { Text("Icon Collection") .font(.headline) LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 6), spacing: 12) { // Navigation & System Icons IconSample(name: "Home", icon: Image.FigmaMCP.home) IconSample(name: "Search", icon: Image.FigmaMCP.search) IconSample(name: "Settings", icon: Image.FigmaMCP.gear) IconSample(name: "Filter", icon: Image.FigmaMCP.filter) IconSample(name: "Library", icon: Image.FigmaMCP.library) IconSample(name: "Explore", icon: Image.FigmaMCP.explore) // Media Controls IconSample(name: "Play", icon: Image.FigmaMCP.play) IconSample(name: "Pause", icon: Image.FigmaMCP.pause) IconSample(name: "Previous", icon: Image.FigmaMCP.previousTrack) IconSample(name: "Next", icon: Image.FigmaMCP.nextTrack) IconSample(name: "Repeat", icon: Image.FigmaMCP.repeat) IconSample(name: "Shuffle", icon: Image.FigmaMCP.shuffle) // Actions IconSample(name: "Plus", icon: Image.FigmaMCP.plus) IconSample(name: "Minus", icon: Image.FigmaMCP.minus) IconSample(name: "Close", icon: Image.FigmaMCP.close) IconSample(name: "Check", icon: Image.FigmaMCP.check) IconSample(name: "Edit", icon: Image.FigmaMCP.edit) IconSample(name: "Trash", icon: Image.FigmaMCP.trash) // Social & Sharing IconSample(name: "Share", icon: Image.FigmaMCP.share) IconSample(name: "Heart", icon: Image.FigmaMCP.heart) IconSample(name: "Comment", icon: Image.FigmaMCP.comment) IconSample(name: "Thumbs Up", icon: Image.FigmaMCP.thumbsUp) IconSample(name: "User", icon: Image.FigmaMCP.user) IconSample(name: "User Group", icon: Image.FigmaMCP.userGroup) // Suno-Specific IconSample(name: "Create", icon: Image.FigmaMCP.create) IconSample(name: "Lyrics", icon: Image.FigmaMCP.lyrics) IconSample(name: "Remix", icon: Image.FigmaMCP.remix) IconSample(name: "Covers", icon: Image.FigmaMCP.covers) IconSample(name: "Stems", icon: Image.FigmaMCP.stems) IconSample(name: "Waveform", icon: Image.FigmaMCP.waveform) } } VStack(alignment: .leading, spacing: 16) { Text("Icon Sizes") .font(.headline) HStack(spacing: 20) { VStack(spacing: 8) { Image.FigmaMCP.home .figmaMCPIconStyle(size: Image.FigmaMCPSize.small) Text("Small (16pt)") .font(.caption) } VStack(spacing: 8) { Image.FigmaMCP.home .figmaMCPIconStyle(size: Image.FigmaMCPSize.medium) Text("Medium (24pt)") .font(.caption) } VStack(spacing: 8) { Image.FigmaMCP.home .figmaMCPIconStyle(size: Image.FigmaMCPSize.large) Text("Large (32pt)") .font(.caption) } VStack(spacing: 8) { Image.FigmaMCP.home .figmaMCPIconStyle(size: Image.FigmaMCPSize.extraLarge) Text("Extra Large (48pt)") .font(.caption) } } } Spacer(minLength: 100) } .padding() } } } struct IconSample: View { let name: String let icon: Image var body: some View { VStack(spacing: 8) { icon .figmaMCPIconStyle(size: 32) .padding() .background(Color.gray.opacity(0.1)) .cornerRadius(8) Text(name) .font(.caption) .multilineTextAlignment(.center) } } } #Preview { FigmaMCPIconsPreview() } #endif