GitHub Avatar GitHub Repository ⚡ Based on SVG-Morpheus

SVG Morpheus TypeScript

Demo: SVG placed via <Object>

Modern TypeScript + Vite + pnpm refactored version

Example 1: Using Static iconset.svg File

📁 Traditional approach: Using pre-built iconset.svg files
Suitable for scenarios with fixed icons that don't require dynamic loading

💻 Example Code 

// 1. 准备静态 iconset.svg 文件
// iconset.svg 包含所有图标的  元素

// 2. HTML 结构


// 3. JavaScript 初始化
import { SVGMorpheus } from 'svg-morpheus-ts';

const morpheus = new SVGMorpheus('#icon', {
  duration: 600,
  easing: 'quad-in-out',
  rotation: 'clock'
});

// 4. 切换到指定图标
morpheus.to('icon-name');

// 5. 带回调的动画
morpheus.to('another-icon', {
  duration: 1000
}, () => {
  console.log('动画完成!');
});

Example 2: Using bundleSvgs for Dynamic SVG Generation

🚀 Modern approach: Runtime dynamic SVG icon merging with loading support
Suitable for modern applications requiring dynamic icon addition and diverse icon sources
✨ New Feature: Support for custom SVG attributes (viewBox, class, data-* etc.)
Generating dynamic SVG...

💻 Advanced Usage 

// 1. 导入所需函数
import { 
  SVGMorpheus, 
  bundleSvgs 
} from 'svg-morpheus-ts';

// 2. 定义 SVG 图标映射
const svgMap = {
  'circle': `
    
  `,
  'square': `
    
  `,
  'vite': '/vite.svg', // 文件路径
};

// 3. 自定义 SVG 属性 (可选)
const customAttributes = {
  viewBox: '0 0 24 24',
  class: 'dynamic-iconset',
  'data-version': '1.0'
};

// 4. 生成合并的 SVG Blob URL (一步完成)
const bundledSvgUrl = await bundleSvgs(svgMap, customAttributes);

// 5. 设置到 object 元素
objectElement.data = bundledSvgUrl;

// 6. 初始化 SVGMorpheus
const morpheus = new SVGMorpheus('#iconDynamic');
morpheus.to('circle');