left menu icon design

This commit is contained in:
Jan Prochazka
2019-12-30 20:17:21 +01:00
parent e22b5559d7
commit ecf00dcc23
8 changed files with 152 additions and 80 deletions

View File

@@ -1,4 +1,5 @@
import React from 'react';
import React from "react";
import _ from "lodash";
function getIconImage(src, { size = 16, style = {}, className, title }) {
if (src.endsWith(".svg")) {
@@ -21,52 +22,92 @@ function getIconImage(src, { size = 16, style = {}, className, title }) {
);
}
export const TableIcon = (props) => getIconImage("table2.svg", props);
export const ViewIcon = (props) => getIconImage("view2.svg", props);
export const DatabaseIcon = (props) => getIconImage("database.svg", props);
export const ServerIcon = (props) => getIconImage("server.svg", props);
export function getFontIcon(fontIconSpec, props = {}) {
let iconClass = fontIconSpec;
if (!iconClass) return null;
var parts = iconClass.split(" ");
var name = parts[0];
parts = parts.slice(1);
export const MicrosoftIcon = (props) => getIconImage("microsoft.svg", props);
export const MySqlIcon = (props) => getIconImage("mysql.svg", props);
export const PostgreSqlIcon = (props) => getIconImage("postgresql.svg", props);
export const SqliteIcon = (props) => getIconImage("sqlite.svg", props);
var className = props.className || "";
export const ProcedureIcon = (props) => getIconImage("procedure2.svg", props);
export const FunctionIcon = (props) => getIconImage("function.svg", props);
export const TriggerIcon = (props) => getIconImage("trigger.svg", props);
// if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
if (_.startsWith(name, "fa-")) className += ` fas fa-${name.substr(3)}`;
export const HomeIcon = (props) => getIconImage("home.svg", props);
export const PrimaryKeyIcon = (props) => getIconImage("primarykey.svg", props);
export const ForeignKeyIcon = (props) => getIconImage("foreignkey.svg", props);
export const ComplexKeyIcon = (props) => getIconImage("complexkey.svg", props);
export const VariableIcon = (props) => getIconImage("variable.svg", props);
export const UniqueIcon = (props) => getIconImage("unique.svg", props);
export const IndexIcon = (props) => getIconImage("index.svg", props);
if (_.includes(parts, "spin")) className += " fa-spin";
export const StartIcon = (props) => getIconImage("start.svg", props);
export const DownCircleIcon = (props) => getIconImage("down_circle.svg", props);
var style = props.style || {};
export const ColumnIcon = (props) => getIconImage("column.svg", props);
var last = parts[parts.length - 1];
if (last && last != "spin") {
style["color"] = last;
}
export const SqlIcon = (props) => getIconImage("sql.svg", props);
export const ExcelIcon = (props) => getIconImage("excel.svg", props);
export const DiagramIcon = (props) => getIconImage("diagram.svg", props);
export const QueryDesignIcon = (props) => getIconImage("querydesign.svg", props);
export const LocalDbIcon = (props) => getIconImage("localdb.svg", props);
export const CsvIcon = (props) => getIconImage("csv.svg", props);
export const ChangeSetIcon = (props) => getIconImage("changeset.svg", props);
export const BinaryFileIcon = (props) => getIconImage("binaryfile.svg", props);
return <i className={className} style={style} title={props.title} />;
}
export const ReferenceIcon = (props) => getIconImage("reference.svg", props);
export const LinkIcon = (props) => getIconImage("link.svg", props);
export const TableIcon = props => getIconImage("table2.svg", props);
export const ViewIcon = props => getIconImage("view2.svg", props);
export const DatabaseIcon = props => getIconImage("database.svg", props);
export const ServerIcon = props => getIconImage("server.svg", props);
export const SequenceIcon = (props) => getIconImage("sequence.svg", props);
export const CheckIcon = (props) => getIconImage("check.svg", props);
export const MicrosoftIcon = props => getIconImage("microsoft.svg", props);
export const MySqlIcon = props => getIconImage("mysql.svg", props);
export const PostgreSqlIcon = props => getIconImage("postgresql.svg", props);
export const SqliteIcon = props => getIconImage("sqlite.svg", props);
export const LinkedServerIcon = (props) => getIconImage("linkedserver.svg", props);
export const ProcedureIcon = props => getIconImage("procedure2.svg", props);
export const FunctionIcon = props => getIconImage("function.svg", props);
export const TriggerIcon = props => getIconImage("trigger.svg", props);
export const EmptyIcon = (props) =>
export const HomeIcon = props => getIconImage("home.svg", props);
export const PrimaryKeyIcon = props => getIconImage("primarykey.svg", props);
export const ForeignKeyIcon = props => getIconImage("foreignkey.svg", props);
export const ComplexKeyIcon = props => getIconImage("complexkey.svg", props);
export const VariableIcon = props => getIconImage("variable.svg", props);
export const UniqueIcon = props => getIconImage("unique.svg", props);
export const IndexIcon = props => getIconImage("index.svg", props);
export const StartIcon = props => getIconImage("start.svg", props);
export const DownCircleIcon = props => getIconImage("down_circle.svg", props);
export const ColumnIcon = props => getIconImage("column.svg", props);
export const SqlIcon = props => getIconImage("sql.svg", props);
export const ExcelIcon = props => getIconImage("excel.svg", props);
export const DiagramIcon = props => getIconImage("diagram.svg", props);
export const QueryDesignIcon = props => getIconImage("querydesign.svg", props);
export const LocalDbIcon = props => getIconImage("localdb.svg", props);
export const CsvIcon = props => getIconImage("csv.svg", props);
export const ChangeSetIcon = props => getIconImage("changeset.svg", props);
export const BinaryFileIcon = props => getIconImage("binaryfile.svg", props);
export const ReferenceIcon = props => getIconImage("reference.svg", props);
export const LinkIcon = props => getIconImage("link.svg", props);
export const SequenceIcon = props => getIconImage("sequence.svg", props);
export const CheckIcon = props => getIconImage("check.svg", props);
export const LinkedServerIcon = props =>
getIconImage("linkedserver.svg", props);
export const EmptyIcon = props =>
getIconImage(
"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
props
);
export const TimesRedIcon = props => getFontIcon("fa-times red", props);
export const TimesGreenCircleIcon = props =>
getFontIcon("fa-times-circle green", props);
export const GrayFilterIcon = props =>
getFontIcon("fa-filter lightgray", props);
export const ExclamationTriangleIcon = props =>
getFontIcon("fa-exclamation-triangle", props);
export const HourGlassIcon = props => getFontIcon("fa-hourglass", props);
export const InfoBlueCircleIcon = props =>
getFontIcon("fa-info-circle blue", props);
export const SpinnerIcon = props => getFontIcon("fa-spinner spin", props);
export const FontIcon = ({ name }) => <i className={`fas ${name}`}></i>;