Skip to content

Commit 528f1f9

Browse files
committed
move the icon-service to separate file
1 parent 4991138 commit 528f1f9

File tree

2 files changed

+24
-26
lines changed

2 files changed

+24
-26
lines changed

lib/icon-service.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Convert the CSS class name of mdi icons to the JS name
2+
function mdiIconName(str) {
3+
// https://github.com/Templarian/MaterialDesign-JS/blob/master/build.js#L5
4+
let name = str.replace(/(-\w)/g, (matches) => matches[1].toUpperCase());
5+
name = `${name[0].toUpperCase()}${name.slice(1)}`;
6+
return `mdi${name}`;
7+
}
8+
9+
let mdi; // mdi iconSet
10+
export async function createMDIIcon(iconName, iconSize) {
11+
if (!mdi) {
12+
mdi = await import('@mdi/js')
13+
}
14+
const iconData = mdi[mdiIconName(iconName)];
15+
const icon = document.createElement("div");
16+
icon.style.verticalAlign = "bottom"
17+
icon.innerHTML = `
18+
<svg style='width:${iconSize}px; height:${iconSize}px' viewBox='0 0 24 24'>
19+
<path fill='currentColor', d='${iconData}'/>
20+
<svg/>
21+
`
22+
return icon
23+
}

lib/items/tool-bar-button-view.js

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
11
import {CompositeDisposable} from 'atom';
22
import { ToolBarItem } from './tool-bar-item';
3-
4-
5-
// Convert the CSS class name of mdi icons to the JS name
6-
function mdiIconName(str) {
7-
// https://github.com/Templarian/MaterialDesign-JS/blob/master/build.js#L5
8-
let name = str.replace(/(-\w)/g, (matches) => matches[1].toUpperCase());
9-
name = `${name[0].toUpperCase()}${name.slice(1)}`;
10-
return `mdi${name}`;
11-
}
12-
13-
let mdi; // mdi iconSet
14-
async function createMDIIcon(iconName, iconSize) {
15-
if (!mdi) {
16-
mdi = await import('@mdi/js')
17-
}
18-
const iconData = mdi[mdiIconName(iconName)];
19-
const icon = document.createElement("div");
20-
icon.style.verticalAlign = "bottom"
21-
icon.innerHTML = `
22-
<svg style='width:${iconSize}px; height:${iconSize}px' viewBox='0 0 24 24'>
23-
<path fill='currentColor', d='${iconData}'/>
24-
<svg/>
25-
`
26-
return icon
27-
}
28-
3+
import { createMDIIcon } from '../icon-service';
294

305
/**
316
* A button class with many options

0 commit comments

Comments
 (0)