Skip to content

README.md

Latest commit

 

History

History
320 lines (249 loc) · 10.4 KB

README.md

File metadata and controls

320 lines (249 loc) · 10.4 KB

Cloud Architect Kits

Icons

A comprehensive toolkit bringing professional cloud architecture and technology icons directly into your favorite design and presentation tools.

🎯 What's Included

  • 🎨 Figma Plugin - Insert icons into Figma designs
  • 📊 PowerPoint Add-in - Add icons to PowerPoint presentations
  • 📈 Google Slides Add-on - Add icons to Google Slides presentations
  • 📐 Draw.io Icon Libraries - Import icons into Draw.io diagrams
  • 💻 VSCode Extension - Insert icons into text files
  • 🔧 Unified Icon System - Consistent library across all platforms
  • ☁️ Azure Deployment - Host PowerPoint add-in on Azure Static Web Apps

✨ Icon Library

9,346 Professional Icons From:

Source Count Description
TheSVG 4,539 Technology and brand SVG icons
Gilbarbara Logos 1,800 Technology company logos
Microsoft 365 963 Office and productivity icons
Lobe Icons 871 Machine learning icons
Azure Architecture 705 Official Azure service icons
AWS Architecture 317 Official AWS service icons
GCP (Google Cloud Platform) 45 Official GCP service icons
Kubernetes 39 Container orchestration icons
Dynamics 365 38 Business application icons
Microsoft Fabric 13 Data analytics and BI icons
Power Platform 9 Low-code platform icons
Microsoft Entra 7 Identity and access icons

🚀 Quick Start

For Figma Users

cd src/figma/plugin
npm install
npm run build

Then import manifest.json in Figma Desktop App.

📖 Detailed Figma Instructions →

For PowerPoint Users

cd src/powerpoint/add-in
npm install
npm run build
npm run serve

Then sideload manifest.xml in PowerPoint.

📖 Detailed PowerPoint Instructions →

For Google Slides Users

cd src/google-slides/addon
npm install
npm run build

Then deploy with clasp push to Google Apps Script.

📖 Detailed Google Slides Instructions →

For Draw.io Users

cd src/drawio/iconlib
npm install
npm run build

Then load library files from dist/drawio-iconlib/ in Draw.io.

📖 Detailed Draw.io Instructions →

For VSCode Users

cd src/vscode/extension
npm install
npm run compile
npm run package

Then install the generated .vsix file in VSCode.

📖 Detailed VSCode Instructions →

✨ Features

  • 🔍 Smart Search - Filter by name, source, or category
  • 📐 Aspect Ratio Preserved - Icons maintain proper proportions
  • ⚡ Fast Performance - Optimized for quick insertion
  • 📊 Live Filtering - Real-time icon count updates
  • 🔝 Smart Navigation - Sticky headers keep you oriented
  • 🎯 One-Click Insert - Intuitive workflow
  • 48x48 Previews - Clear icon thumbnails

🏗️ Architecture

Unified Icon Processing

┌─────────────────────────────────────────┐
│  Icon Sources (Official Repositories)   │
└────────────────┬────────────────────────┘
                 │
          ┌──────▼──────┐
          │   Prebuild   │  ← Process once
          │   System     │     - Normalize SVGs
          └──────┬──────┘     - Generate templates
                 │            - Create icons-data.js
       ┌─────────┴──────────────────────┐
       │         │         │      │      │
  ┌────▼─────┐ ┌▼──────┐ ┌▼──────┐ ┌▼──────┐ ┌▼──────┐
  │  Figma   │ │ PPT   │ │Google │ │Draw.io│ │VSCode │
  │  Plugin  │ │Add-in │ │Slides │ │Library│ │  Ext  │
  └──────────┘ └───────┘ └───────┘ └───────┘ └───────┘

Benefits:

  • ✅ Consistency - Same icons across all platforms
  • ⚡ Efficiency - Icons processed once, used everywhere
  • 🔄 Easy Updates - Update icons in one place
  • 📦 Maintainability - Single source of truth

📦 Project Structure

cloud-architect-kits/
├── README.md                    # This file
├── INSTALL.md                   # Installation index
├── src/
│   ├── prebuild/                # Unified icon processing
│   │   ├── process-icons.js    # Icon normalization
│   │   ├── templates/          # Shared UI templates
│   │   │   ├── ui-base.html    # HTML structure
│   │   │   ├── ui-base.css     # Styles
│   │   │   ├── ui-base.js      # UI logic
│   │   │   ├── icons-data.js   # Icon data (~26MB)
│   │   │   └── icons-data.hash # Cache-busting hash
│   │   └── icons/ + icons.json (generated)
│   │
│   ├── figma/                   # Figma plugin
│   │   ├── README.md           # Plugin docs
│   │   ├── INSTALL.md          # Install guide
│   │   └── plugin/             # Plugin code
│   │       ├── manifest.json   # Figma manifest
│   │       ├── code.ts         # Backend logic
│   │       ├── ui.html         # Generated UI (standalone)
│   │       └── build.js        # Build script
│   │
│   ├── powerpoint/              # PowerPoint add-in
│   │   ├── README.md           # Add-in docs
│   │   ├── INSTALL.md          # Install guide
│   │   ├── add-in/             # Add-in code
│   │   │   ├── manifest.xml    # Office manifest
│   │   │   ├── taskpane.html   # Generated UI
│   │   │   ├── taskpane.css    # Generated styles
│   │   │   ├── taskpane.js     # Generated logic
│   │   │   ├── icons-data.js   # Generated data
│   │   │   └── build.js        # Build script
│   │   └── terraform/          # Azure infrastructure
│   │
│   ├── google-slides/           # Google Slides add-on
│   │   ├── README.md           # Add-on docs
│   │   ├── INSTALL.md          # Install guide
│   │   └── addon/              # Add-on code
│   │       ├── appsscript.json # Apps Script config
│   │       ├── Code.gs         # Server-side code
│   │       ├── Sidebar*.html   # Generated UI parts
│   │       └── build.js        # Build script
│   │
│   └── drawio/                  # Draw.io icon libraries
│       ├── README.md           # Library docs
│       ├── INSTALL.md          # Install guide
│       └── iconlib/            # Generator code
│           ├── generate-library.js
│           └── build.js        # Build script
│
├── scripts/                     # Download & build scripts
│   ├── download-*.sh           # Icon source downloaders
│   └── build-and-release.sh    # Unified build script
├── temp/                        # Downloaded sources
└── dist/                        # Release packages
    ├── figma-plugin/
    ├── powerpoint-addin/
    ├── google-slides-addon/
    └── drawio-iconlib/

🛠️ Development

Full Build Process

# Download icons + Build everything
./scripts/build-and-release.sh

Individual Components

# 1. Prebuild icons
cd src/prebuild
npm run build

# 2. Build Figma plugin
cd ../figma/plugin
npm run build

# 3. Build PowerPoint add-in
cd ../../powerpoint/add-in
npm run build

# 4. Build Google Slides add-on
cd ../../google-slides/addon
npm run build

# 5. Build Draw.io icon libraries
cd ../../drawio/iconlib
npm run build

📚 Documentation

🎯 Use Cases

For Designers (Figma)

  • System Diagrams - Architecture documentation
  • Design Systems - Consistent icon libraries
  • UI/UX Design - Cloud service representations
  • Wireframes - Technology stack visualization

For Presenters (PowerPoint & Google Slides)

  • Architecture Presentations - Technical diagrams
  • Executive Briefings - High-level overviews
  • Training Materials - Educational content
  • Documentation - Technical specifications
  • Collaborative Presentations - Cloud-based editing

For Diagram Makers (Draw.io)

  • System Architecture - Cloud infrastructure diagrams
  • Network Diagrams - Network topology visualization
  • Data Flow Diagrams - Information flow documentation
  • Process Flows - Business and technical processes
  • Documentation - Visual technical documentation

🔧 Requirements

Figma Plugin

  • Node.js 14+
  • Figma Desktop App (for development)
  • npm

PowerPoint Add-in

  • Node.js 14+
  • PowerPoint (Office 365 or 2016+)
  • npm
  • Azure subscription (optional, for deployment)

Google Slides Add-on

  • Node.js 14+
  • Google Account (for deployment)
  • npm
  • @google/clasp (for deployment)

Draw.io Icon Libraries

  • Node.js 14+
  • npm
  • Web browser or Draw.io Desktop App

📄 License

ISC

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Create a Pull Request

📞 Support

  • Issues: GitHub Issues
  • Documentation: See individual plugin READMEs
  • Questions: Create a Discussion

Made with ❤️ for cloud architects, designers, and presenters