@bimdos/icon
Version:
跨框架图标库，支持 React、Vue、Angular、AngularJS、小程序等多种使用方式
88 lines (75 loc) • 3.54 kB
JavaScript
/**
* Bimdos 图标服务 - AngularJS 版本
*/
(function() {
'use strict';
angular
.module('bimdosIcon')
.service('BimdosIconService', BimdosIconService);
/**
* 图标服务
*/
function BimdosIconService() {
var service = this;
// 图标数据映射
var iconMap = {
'up': { path: 'M489.373 361.373C501.744 349 521.726 348.877 534.25 361l.377.372 256 256c12.497 12.496 12.497 32.758 0 45.254-12.371 12.372-32.353 12.496-44.877.372l-.377-.372L512 429.255 278.627 662.627C266.256 675 246.274 675.123 233.75 663l-.377-.372C221 650.256 220.877 630.274 233 617.75l.372-.377z', viewBox: '0 0 1024 1024' },
'right': { path: 'M361.373 233.373C373.744 221 393.726 220.877 406.25 233l.377.372 256 256c12.372 12.371 12.496 32.353.372 44.877l-.372.377-256 256c-12.496 12.497-32.758 12.497-45.254 0-12.373-12.37-12.496-32.352-.373-44.876l.372-.377L594.745 512 361.373 278.627C349 266.256 348.877 246.274 361 233.75z', viewBox: '0 0 1024 1024' },
'left': { path: 'M617.373 233.373c12.496-12.497 32.758-12.497 45.254 0 12.372 12.371 12.496 32.353.372 44.877l-.372.377L429.255 512l233.372 233.373c12.372 12.371 12.496 32.353.372 44.877l-.372.377C650.256 803 630.274 803.123 617.75 791l-.377-.372-256-256C349 522.256 348.877 502.274 361 489.75l.372-.377z', viewBox: '0 0 1024 1024' },
'down': { path: 'M745.373 361.373c12.496-12.497 32.758-12.497 45.254 0 12.372 12.371 12.496 32.353.372 44.877l-.372.377-256 256C522.256 675 502.274 675.123 489.75 663l-.377-.372-256-256c-12.497-12.496-12.497-32.758 0-45.254C245.744 349 265.726 348.877 278.25 361l.377.372L512 594.745z', viewBox: '0 0 1024 1024' }
};
/**
* 获取图标数据
* @param {string} name - 图标名称
* @returns {object|null} 图标数据
*/
service.getIcon = function(name) {
return iconMap[name] || null;
};
/**
* 获取所有图标名称
* @returns {array} 图标名称数组
*/
service.getIconNames = function() {
return [
'up',
'right',
'left',
'down'
];
};
/**
* 检查图标是否存在
* @param {string} name - 图标名称
* @returns {boolean} 是否存在
*/
service.hasIcon = function(name) {
return !!iconMap[name];
};
/**
* 生成 SVG HTML
* @param {string} name - 图标名称
* @param {object} options - 选项
* @returns {string} SVG HTML 字符串
*/
service.generateSvg = function(name, options) {
options = options || {};
var iconData = iconMap[name];
if (!iconData) {
console.warn('Icon "' + name + '" not found');
return '';
}
var size = options.size || 16;
var color = options.color || 'currentColor';
var className = options.className || '';
var viewBox = iconData.viewBox || '0 0 1024 1024';
return '<svg class="bimdos-icon ' + className + '" ' +
'width="' + size + '" ' +
'height="' + size + '" ' +
'viewBox="' + viewBox + '" ' +
'fill="' + color + '">' +
'<path d="' + iconData.path + '"></path>' +
'</svg>';
};
}
})();