diff --git a/lib/icon-service/mdi.js b/lib/icon-service/mdi.js new file mode 100644 index 0000000..4fd25f6 --- /dev/null +++ b/lib/icon-service/mdi.js @@ -0,0 +1,23 @@ +// Convert the CSS class name of mdi icons to the JS name +function mdiIconName(str) { + // https://github.com/Templarian/MaterialDesign-JS/blob/master/build.js#L5 + let name = str.replace(/(-\w)/g, (matches) => matches[1].toUpperCase()); + name = `${name[0].toUpperCase()}${name.slice(1)}`; + return `mdi${name}`; +} + +let mdi; // mdi iconSet +export async function createMDIIcon(iconName, iconSize) { + if (!mdi) { + mdi = await import('@mdi/js') + } + const iconData = mdi[mdiIconName(iconName)]; + const icon = document.createElement("div"); + icon.style.verticalAlign = "bottom" + icon.innerHTML = ` + + + + ` + return icon +} diff --git a/lib/items/tool-bar-button-view.js b/lib/items/tool-bar-button-view.js index 806350b..70ad280 100644 --- a/lib/items/tool-bar-button-view.js +++ b/lib/items/tool-bar-button-view.js @@ -1,31 +1,6 @@ import {CompositeDisposable} from 'atom'; import { ToolBarItem } from './tool-bar-item'; - - -// Convert the CSS class name of mdi icons to the JS name -function mdiIconName(str) { - // https://github.com/Templarian/MaterialDesign-JS/blob/master/build.js#L5 - let name = str.replace(/(-\w)/g, (matches) => matches[1].toUpperCase()); - name = `${name[0].toUpperCase()}${name.slice(1)}`; - return `mdi${name}`; -} - -let mdi; // mdi iconSet -async function createMDIIcon(iconName, iconSize) { - if (!mdi) { - mdi = await import('@mdi/js') - } - const iconData = mdi[mdiIconName(iconName)]; - const icon = document.createElement("div"); - icon.style.verticalAlign = "bottom" - icon.innerHTML = ` - - - - ` - return icon -} - +import { createMDIIcon } from '../icon-service/mdi'; /** * A button class with many options