using fonticon instead of span

This commit is contained in:
Jan Prochazka
2020-11-10 17:34:00 +01:00
parent 1169e23997
commit 1c2dedfef3
20 changed files with 77 additions and 42 deletions

View File

@@ -1,14 +1,30 @@
import React from 'react';
import _ from 'lodash';
export function ExpandIcon({ isBlank = false, isExpanded = false, className = '', ...other }) {
if (isBlank) {
return <span className={`mdi mdi-minus-box-outline icon-invisible ${className}`} {...other} />;
const iconNames = {
'icon minus-box': 'mdi mdi-minus-box-outline',
'icon plus-box': 'mdi mdi-plus-box-outline',
'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
'icon cloud-upload': 'mdi mdi-cloud-upload',
'icon database': 'mdi mdi-database',
'icon archive': 'mdi mdi-archive',
'icon file': 'mdi mdi-file',
};
export function FontIcon({ icon, className = '', ...other }) {
if (!icon) return null;
let cls = icon;
if (icon.startsWith('icon ')) {
cls = iconNames[icon];
if (!cls) return null;
}
return (
<span
className={`${isExpanded ? 'mdi mdi-minus-box-outline' : 'mdi mdi-plus-box-outline'} ${className}`}
{...other}
/>
);
return <span className={`${cls} ${className}`} {...other} />;
}
export function ExpandIcon({ isBlank = false, isExpanded = false, ...other }) {
if (isBlank) {
return <FontIcon icon="icon invisible-box" {...other} />;
}
return <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...other} />;
}