feat(ui): replace all emojis with professional vector SVG icons suite
This commit is contained in:
+366
@@ -0,0 +1,366 @@
|
||||
// FlockRadar Professional SVG Vector Icon Suite
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
function createSvg(innerPath, className, viewBox, strokeWidth) {
|
||||
const cls = className ? `flock-svg ${className}` : 'flock-svg';
|
||||
const vb = viewBox || '0 0 24 24';
|
||||
const sw = strokeWidth || 2;
|
||||
return `<svg class="${cls}" viewBox="${vb}" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${innerPath}</svg>`;
|
||||
}
|
||||
|
||||
const FlockIcons = {
|
||||
camera: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>` +
|
||||
`<circle cx="12" cy="13" r="3"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
cameraPlus: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>` +
|
||||
`<circle cx="12" cy="13" r="3"/>` +
|
||||
`<line x1="12" y1="10" x2="12" y2="16"/>` +
|
||||
`<line x1="9" y1="13" x2="15" y2="13"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
mapPin: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>` +
|
||||
`<circle cx="12" cy="10" r="3"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
radar: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="9"/>` +
|
||||
`<circle cx="12" cy="12" r="5"/>` +
|
||||
`<circle cx="12" cy="12" r="1" fill="currentColor"/>` +
|
||||
`<path d="M12 3v9l5.5 3.5"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
building: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<rect x="4" y="2" width="16" height="20" rx="2" ry="2"/>` +
|
||||
`<line x1="9" y1="22" x2="9" y2="18"/>` +
|
||||
`<line x1="15" y1="22" x2="15" y2="18"/>` +
|
||||
`<line x1="9" y1="18" x2="15" y2="18"/>` +
|
||||
`<line x1="8" y1="6" x2="8.01" y2="6"/>` +
|
||||
`<line x1="16" y1="6" x2="16.01" y2="6"/>` +
|
||||
`<line x1="8" y1="10" x2="8.01" y2="10"/>` +
|
||||
`<line x1="16" y1="10" x2="16.01" y2="10"/>` +
|
||||
`<line x1="8" y1="14" x2="8.01" y2="14"/>` +
|
||||
`<line x1="16" y1="14" x2="16.01" y2="14"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
shield: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
shieldCheck: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>` +
|
||||
`<polyline points="9 12 11 14 15 10"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
thumbUp: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M7 10v12"/>` +
|
||||
`<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
alertTriangle: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>` +
|
||||
`<line x1="12" y1="9" x2="12" y2="13"/>` +
|
||||
`<line x1="12" y1="17" x2="12.01" y2="17"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
navigation: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="3 11 22 2 13 21 11 13 3 11"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
map: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/>` +
|
||||
`<line x1="8" y1="2" x2="8" y2="18"/>` +
|
||||
`<line x1="16" y1="6" x2="16" y2="22"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
trophy: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>` +
|
||||
`<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>` +
|
||||
`<path d="M4 22h16"/>` +
|
||||
`<path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>` +
|
||||
`<path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>` +
|
||||
`<path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
chart: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<line x1="18" y1="20" x2="18" y2="10"/>` +
|
||||
`<line x1="12" y1="20" x2="12" y2="4"/>` +
|
||||
`<line x1="6" y1="20" x2="6" y2="14"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
volume: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>` +
|
||||
`<path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>` +
|
||||
`<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
volumeX: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>` +
|
||||
`<line x1="23" y1="9" x2="17" y2="15"/>` +
|
||||
`<line x1="17" y1="9" x2="23" y2="15"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
crosshair: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="10"/>` +
|
||||
`<line x1="22" y1="12" x2="18" y2="12"/>` +
|
||||
`<line x1="6" y1="12" x2="2" y2="12"/>` +
|
||||
`<line x1="12" y1="6" x2="12" y2="2"/>` +
|
||||
`<line x1="12" y1="22" x2="12" y2="18"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
smartphone: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>` +
|
||||
`<line x1="12" y1="18" x2="12.01" y2="18"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
search: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="11" cy="11" r="8"/>` +
|
||||
`<line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
fileText: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>` +
|
||||
`<polyline points="14 2 14 8 20 8"/>` +
|
||||
`<line x1="16" y1="13" x2="8" y2="13"/>` +
|
||||
`<line x1="16" y1="17" x2="8" y2="17"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
checkCircle: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>` +
|
||||
`<polyline points="22 4 12 14.01 9 11.01"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
check: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polyline points="20 6 9 17 4 12"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
externalLink: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>` +
|
||||
`<polyline points="15 3 21 3 21 9"/>` +
|
||||
`<line x1="10" y1="14" x2="21" y2="3"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
car: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9C2.1 11 2 11.3 2 11.7V16c0 .6.4 1 1 1h2"/>` +
|
||||
`<circle cx="7" cy="17" r="2"/>` +
|
||||
`<path d="M9 17h6"/>` +
|
||||
`<circle cx="17" cy="17" r="2"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
settings: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="3"/>` +
|
||||
`<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"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
trash: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polyline points="3 6 5 6 21 6"/>` +
|
||||
`<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"/>` +
|
||||
`<line x1="10" y1="11" x2="10" y2="17"/>` +
|
||||
`<line x1="14" y1="11" x2="14" y2="17"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
target: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="10"/>` +
|
||||
`<circle cx="12" cy="12" r="6"/>` +
|
||||
`<circle cx="12" cy="12" r="2"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
satellite: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M4 10a7.33 7.33 0 0 0 10 10l1-3.5L8.5 10z"/>` +
|
||||
`<path d="M21 3l-8.5 8.5"/>` +
|
||||
`<path d="M15 6l2 2"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
radio: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="2"/>` +
|
||||
`<path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
layers: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="12 2 2 7 12 12 22 7 12 2"/>` +
|
||||
`<polyline points="2 17 12 22 22 17"/>` +
|
||||
`<polyline points="2 12 12 17 22 12"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
maximize: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
zap: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
link: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>` +
|
||||
`<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
globe: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="10"/>` +
|
||||
`<line x1="2" y1="12" x2="22" y2="12"/>` +
|
||||
`<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
scale: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/>` +
|
||||
`<path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/>` +
|
||||
`<path d="M7 21h10"/>` +
|
||||
`<path d="M12 3v18"/>` +
|
||||
`<path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
clipboard: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>` +
|
||||
`<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
chevronDown: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polyline points="6 9 12 15 18 9"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
x: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<line x1="18" y1="6" x2="6" y2="18"/>` +
|
||||
`<line x1="6" y1="6" x2="18" y2="18"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
pause: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<rect x="6" y="4" width="4" height="16"/>` +
|
||||
`<rect x="14" y="4" width="4" height="16"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
play: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<polygon points="5 3 19 12 5 21 5 3"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
},
|
||||
|
||||
stopCircle: function(className, strokeWidth) {
|
||||
return createSvg(
|
||||
`<circle cx="12" cy="12" r="10"/>` +
|
||||
`<rect x="9" y="9" width="6" height="6"/>`,
|
||||
className, '0 0 24 24', strokeWidth
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
window.FlockIcons = FlockIcons;
|
||||
})();
|
||||
Reference in New Issue
Block a user