@nasp/icons
Version:
Universal design and icon system for NASP Asset Studio, with NaspScript language support.
635 lines (622 loc) • 27 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.NASPIcons = factory());
})(this, (function () { 'use strict';
var main = {
title: "Main Brand & Application",
description: "Primary logos for Adobe apps and the NASP brand.",
icons: {
NASP: {
name: "NASP Studio Logo",
tags: [
"brand",
"logo"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><defs><linearGradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" style=\"stop-color:#5865f2;stop-opacity:1\" /><stop offset=\"100%\" style=\"stop-color:#7289da;stop-opacity:1\" /></linearGradient></defs><path fill=\"url(#logoGradient)\" d=\"M 20,80 L 50,20 L 80,80 L 65,80 L 50,50 L 35,80 Z\" /><path fill-opacity=\"0.5\" fill=\"url(#logoGradient)\" d=\"M 50,20 L 65,80 L 50,80 L 50,50 Z\" /></svg>"
},
AfterEffects: {
name: "Adobe After Effects",
tags: [
"adobe",
"ae",
"vfx"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M15.5 15.5L12 7l-3.5 8.5\"/><path d=\"M14 13h-4\"/></svg>"
},
PremierePro: {
name: "Adobe Premiere Pro",
tags: [
"adobe",
"pr",
"video"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M8 15V9h2.5a2.5 2.5 0 0 1 0 5H8\"/><path d=\"M14 15V9h2.5a2.5 2.5 0 0 1 0 5H14\"/></svg>"
}
}
};
var assetTypes = {
title: "Asset & Category Icons",
description: "Icons for identifying different types of products.",
icons: {
MOGRT: {
name: "MOGRT / Titles",
tags: [
"mogrt",
"title",
"text"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16v2H4zM4 18h16v2H4zM9 10h6v4H9z\" /></svg>"
},
Script: {
name: "Script / Utility",
tags: [
"script",
"code",
"utility"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"16 18 22 12 16 6\"></polyline><polyline points=\"8 6 2 12 8 18\"></polyline></svg>"
},
Plugin: {
name: "Plugin / Effects",
tags: [
"plugin",
"effect",
"fx"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.89 1.45l8.66 5a2 2 0 0 1 1 1.73v10.64a2 2 0 0 1-1 1.73l-8.66 5a2 2 0 0 1-2 0l-8.66-5a2 2 0 0 1-1-1.73V8.18a2 2 0 0 1 1-1.73l8.66-5a2 2 0 0 1 2 0z\"></path><path d=\"M12 22.08V12\"></path><path d=\"m22 8.18-10 5.72-10-5.72\"></path><path d=\"m12 12 10-5.72\"></path></svg>"
},
Transitions: {
name: "Transitions",
tags: [
"transition",
"swipe",
"animation"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 12h20m-9-9 9 9-9 9\"/></svg>"
},
Presets: {
name: "Color Presets / LUTs",
tags: [
"color",
"lut",
"preset",
"grade"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 2a7 7 0 1 0 0 14 7 7 0 1 0 0-14z\"/></svg>"
},
SoundFX: {
name: "Sound FX",
tags: [
"sound",
"audio",
"sfx"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 5L6 9H2v6h4l5 4V5zM15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>"
}
}
};
var generalUI = {
title: "General UI",
description: "A large collection of general-purpose icons for UI design.",
icons: {
Search: {
name: "Search",
tags: [
"find",
"query"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>"
},
Settings: {
name: "Settings",
tags: [
"options",
"gear"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"></circle><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"></path></svg>"
},
Info: {
name: "More Info",
tags: [
"help",
"information"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>"
},
Favorite: {
name: "Favorite (Star)",
tags: [
"favorite",
"star",
"bookmark"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon></svg>"
},
ArrowUp: {
name: "Arrow Up",
tags: [
"arrow",
"up",
"direction"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"5\"></line><polyline points=\"5 12 12 5 19 12\"></polyline></svg>"
},
ArrowDown: {
name: "Arrow Down",
tags: [
"arrow",
"down",
"direction"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line><polyline points=\"19 12 12 19 5 12\"></polyline></svg>"
},
ArrowLeft: {
name: "Arrow Left",
tags: [
"arrow",
"left",
"direction"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"></line><polyline points=\"12 19 5 12 12 5\"></polyline></svg>"
},
ArrowRight: {
name: "Arrow Right",
tags: [
"arrow",
"right",
"direction"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line><polyline points=\"12 5 19 12 12 19\"></polyline></svg>"
},
ChevronDown: {
name: "Chevron Down",
tags: [
"chevron",
"down",
"arrow"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>"
},
ChevronUp: {
name: "Chevron Up",
tags: [
"chevron",
"up",
"arrow"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>"
},
Close: {
name: "Close",
tags: [
"close",
"exit",
"x"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>"
},
Menu: {
name: "Menu",
tags: [
"menu",
"hamburger",
"options"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line></svg>"
},
Edit: {
name: "Edit",
tags: [
"edit",
"pencil",
"write"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"></path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"></path></svg>"
},
Delete: {
name: "Delete",
tags: [
"delete",
"trash",
"remove"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"></polyline><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path><line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line><line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line></svg>"
},
Save: {
name: "Save",
tags: [
"save",
"disk",
"floppy"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>"
},
Plus: {
name: "Plus",
tags: [
"add",
"new",
"create"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>"
},
Minus: {
name: "Minus",
tags: [
"remove",
"subtract",
"delete"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line></svg>"
},
Warning: {
name: "Warning",
tags: [
"warning",
"alert",
"error"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"></path><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"></line><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"></line></svg>"
},
Success: {
name: "Success",
tags: [
"success",
"check",
"complete"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path><polyline points=\"22 4 12 14.01 9 11.01\"></polyline></svg>"
},
ExternalLink: {
name: "External Link",
tags: [
"link",
"external",
"share"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path><polyline points=\"15 3 21 3 21 9\"></polyline><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line></svg>"
},
Home: {
name: "Home",
tags: [
"home",
"house",
"main"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"></path><polyline points=\"9 22 9 12 15 12 15 22\"></polyline></svg>"
},
User: {
name: "User",
tags: [
"user",
"profile",
"person"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path><circle cx=\"12\" cy=\"7\" r=\"4\"></circle></svg>"
},
Lock: {
name: "Lock",
tags: [
"lock",
"security",
"private"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>"
},
Mail: {
name: "Mail",
tags: [
"mail",
"email",
"contact"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><polyline points=\"22,6 12,13 2,6\"></polyline></svg>"
}
}
};
var pageIcons = {
title: "Page Icons",
description: "Icons used on specific pages like Home, Store, and Docs.",
icons: {
DownloadStat: {
name: "Download Stat",
tags: [
"download",
"arrow",
"stats"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><polyline points=\"7 10 12 15 17 10\"></polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"></line></svg>"
},
UserGroup: {
name: "User Group",
tags: [
"users",
"people",
"community"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>"
},
Trophy: {
name: "Trophy",
tags: [
"award",
"prize",
"winner"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L9 5H5v6l4 4-4 4v6h4l3 3 3-3h4v-6l-4-4 4-4V5h-4L12 2z\"></path><path d=\"M12 2v20\"></path></svg>"
},
MagicWand: {
name: "Magic Wand",
tags: [
"magic",
"wizard",
"effect"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 4l-8 8 4 4 8-8-4-4zM9 15l-6 6m12-6l-1.5-1.5\"></path><path d=\"M22 2l-2 2m-6 6l-2 2\"></path></svg>"
},
PlayButton: {
name: "Play Button",
tags: [
"demo",
"video",
"play"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polygon points=\"10 8 16 12 10 16 10 8\"></polygon></svg>"
},
Filter: {
name: "Filter",
tags: [
"filter",
"funnel",
"sort"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 3h18v3l-7 8v7l-4-3v-4L3 6V3z\"></path></svg>"
},
Wishlist: {
name: "Wishlist",
tags: [
"heart",
"favorite",
"like"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"></path></svg>"
},
QuickView: {
name: "Quick View",
tags: [
"eye",
"preview",
"view"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path><circle cx=\"12\" cy=\"12\" r=\"3\"></circle></svg>"
},
Share: {
name: "Share",
tags: [
"social",
"share",
"network"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"></circle><circle cx=\"6\" cy=\"12\" r=\"3\"></circle><circle cx=\"18\" cy=\"19\" r=\"3\"></circle><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"></line><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"></line></svg>"
},
DocCard: {
name: "Doc Card",
tags: [
"doc",
"file",
"page"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"></line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"></line><polyline points=\"10 9 9 9 8 9\"></polyline></svg>"
},
CopyCode: {
name: "Copy Code",
tags: [
"copy",
"clipboard",
"code"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>"
},
Contribute: {
name: "Contribute",
tags: [
"edit",
"pencil",
"add"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 20h9\"></path><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"></path></svg>"
},
DownloadPDF: {
name: "Download PDF",
tags: [
"pdf",
"download",
"file"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"></path><polyline points=\"14 2 14 8 20 8\"></polyline><path d=\"M12 18v-6l-2 2m2-2l2 2m-5-2h6\"></path></svg>"
},
Team: {
name: "Team",
tags: [
"team",
"people",
"users"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"9\" cy=\"7\" r=\"4\"></circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"></path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path></svg>"
},
Timeline: {
name: "Timeline",
tags: [
"timeline",
"roadmap",
"history"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><polyline points=\"12 6 12 12 16 14\"></polyline></svg>"
},
Values: {
name: "Values",
tags: [
"values",
"heart",
"mission"
],
svg: "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"></path></svg>"
}
}
};
var avatars = {
title: "Default Profile Avatars",
description: "A collection of stylish, minimalist avatars.",
icons: {
Gray: {
name: "Gray (Default)",
tags: [
"avatar",
"profile"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#2b2d31\"/><path d=\"M50 58c-11 0-20 9-20 20v12h40V78c0-11-9-20-20-20z\" fill=\"#1e1f22\"/><circle cx=\"50\" cy=\"42\" r=\"14\" fill=\"#1e1f22\"/></svg>"
},
Blurple: {
name: "Blurple (Accent)",
tags: [
"avatar",
"profile"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#5865f2\"/><path d=\"M50 58c-11 0-20 9-20 20v12h40V78c0-11-9-20-20-20z\" fill=\"#f2f3f5\"/><circle cx=\"50\" cy=\"42\" r=\"14\" fill=\"#f2f3f5\"/></svg>"
},
Orange: {
name: "Orange",
tags: [
"avatar",
"profile"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#f2b32f\"/><path d=\"M50 58c-11 0-20 9-20 20v12h40V78c0-11-9-20-20-20z\" fill=\"#1e1f22\"/><circle cx=\"50\" cy=\"42\" r=\"14\" fill=\"#1e1f22\"/></svg>"
},
White: {
name: "White",
tags: [
"avatar",
"profile"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#f2f3f5\"/><path d=\"M50 58c-11 0-20 9-20 20v12h40V78c0-11-9-20-20-20z\" fill=\"#2b2d31\"/><circle cx=\"50\" cy=\"42\" r=\"14\" fill=\"#2b2d31\"/></svg>"
},
Black: {
name: "Black",
tags: [
"avatar",
"profile"
],
svg: "<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"#111214\"/><path d=\"M50 58c-11 0-20 9-20 20v12h40V78c0-11-9-20-20-20z\" fill=\"#b5bac1\"/><circle cx=\"50\" cy=\"42\" r=\"14\" fill=\"#b5bac1\"/></svg>"
}
}
};
var iconsData = {
main: main,
assetTypes: assetTypes,
generalUI: generalUI,
pageIcons: pageIcons,
avatars: avatars
};
/**
* NASP Icons Browser Bundle
*
* This file creates a browser-compatible version of the NASP icon library
* with embedded icon data and automatic parsing of <nasp-icon> tags.
*/
/**
* NASP Icon Library for Browser Usage
*/
const NASPIconLibrary = {
_icons: {},
_initialized: false,
/**
* Initialize the icon library with embedded data
*/
init() {
if (this._initialized) return;
// Flatten the icon data for easy lookup
for (const categoryKey in iconsData) {
if (iconsData[categoryKey].icons) {
for (const iconKey in iconsData[categoryKey].icons) {
this._icons[iconKey] = iconsData[categoryKey].icons[iconKey].svg;
}
}
}
this._initialized = true;
},
/**
* Gets the raw SVG string for a given icon.
* @param {string} name - The name/key of the icon (e.g., "Search").
* @returns {string|null} The SVG string or null if not found.
*/
getIconSVG(name) {
if (!this._initialized) this.init();
return this._icons[name] || null;
},
/**
* Creates a styled SVG element string from a name and properties.
* @param {string} name - The name of the icon.
* @param {object} props - Properties like size, color, class, etc.
* @returns {string|null} The full, styled SVG tag as a string.
*/
createIcon(name, props = {}) {
if (!this._initialized) this.init();
let svgString = this.getIconSVG(name);
if (!svgString) {
console.warn(`NASP Icon: Icon "${name}" not found.`);
return `<svg viewBox="0 0 24 24" width="${props.size || 24}" height="${props.size || 24}"><path d="M12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1.707 12.707l-1.414-1.414L10.586 12 8.879 10.293l1.414-1.414L12 10.586l1.707-1.707 1.414 1.414L13.414 12l1.707 1.707-1.414 1.414L12 13.414l-1.707 1.707z" fill="red"/></svg>`;
}
// Use a temporary DOM element to easily manipulate attributes
const tempDiv = document.createElement('div');
tempDiv.innerHTML = svgString;
const svgElement = tempDiv.firstChild;
// Apply properties
if (props.size) {
svgElement.setAttribute('width', props.size);
svgElement.setAttribute('height', props.size);
}
if (props.color) {
svgElement.setAttribute('stroke', props.color);
}
if (props.class) {
svgElement.setAttribute('class', props.class);
}
// Add default class for potential styling
svgElement.classList.add('nasp-icon');
return svgElement.outerHTML;
},
/**
* Finds all <nasp-icon> tags on the page and replaces them.
*/
parse() {
if (!this._initialized) this.init();
const iconTags = document.querySelectorAll('nasp-icon');
iconTags.forEach(tag => {
const name = tag.getAttribute('name');
if (!name) return;
const props = {
size: tag.getAttribute('size'),
color: tag.getAttribute('color'),
class: tag.getAttribute('class')
};
const finalSVG = this.createIcon(name, props);
if (finalSVG) {
// Replace the custom tag with the real SVG
tag.outerHTML = finalSVG;
}
});
}
};
// Auto-parse when DOM is ready
if (typeof window !== 'undefined') {
window.addEventListener('DOMContentLoaded', () => {
NASPIconLibrary.parse();
});
}
// Also expose to global scope for direct script usage
if (typeof window !== 'undefined') {
window.NASPIconLibrary = NASPIconLibrary;
}
return NASPIconLibrary;
}));