const icons = require.context( | |
'@akryum/md-icons-svg/svg/', | |
true, | |
/materialicons\/24px\.svg$/, | |
) | |
export default { | |
install() { | |
const sprites = [''] | |
let spriteIndex = 0 | |
// Load all the SVG symbols | |
icons.keys().forEach((key, index) => { | |
let result = icons(key) | |
const [, iconName] = /(\w+)\/materialicons/.exec(key) | |
// eslint-disable-next-line regexp/no-super-linear-backtracking | |
const [, content] = /<svg.+?>(.*)<\/svg>/.exec(result) | |
result = `<svg xmlns="http://www.w3.org/2000/svg" id="ic_${iconName}_standard" viewBox="0 0 24 24">${content}</svg>` | |
sprites[spriteIndex] += result | |
if ((index + 1) % 40 === 0) { | |
sprites.push('') | |
spriteIndex++ | |
} | |
}) | |
for (const html of sprites) { | |
const iconsWrapper = document.createElement('div') | |
iconsWrapper.style.display = 'none' | |
iconsWrapper.innerHTML = html | |
document.body.insertBefore(iconsWrapper, document.body.firstChild) | |
} | |
}, | |
} | |
export function generateHtmlIcon(icon: string) { | |
return `<div class="vue-ui-icon"><svg><use href="#ic_${icon}_standard"></use></svg></div>` | |
} | |