// @ts-nocheck
import { promises as fs } from 'fs'
import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss'
import { compareColors, stringToColor } from '@iconify/utils/lib/colors'
import {
deOptimisePaths,
importDirectory,
parseColors,
runSVGO,
} from '@iconify/tools'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import presetWind from '@unocss/preset-wind'
export function createConfig({ strict = true, dev = true } = {}) {
return defineConfig({
envMode: dev ? 'dev' : 'build',
safelist: ['i-ikea:home', 'i-ikea:negotiation', 'i-ikea:database', 'i-ikea:budget', 'i-ikea:permission', 'i-ikea:arrow-slim', 'i-ikea:arrow-strong', 'i-ikea:calendar', 'bg-#EF776E', 'bg-#FDC300', 'bg-#5687C2', 'bg-#52A876'],
presets: [
presetWind(),
presetIcons({
autoInstall: true,
extraProperties: {
'display': 'inline-block',
'vertical-align': 'middle',
'cursor': 'pointer',
},
collections: {
// Loading IconifyJSON data
'test': async () => {
const content = await fs.readFile(
'src/assets/test.json',
'utf8',
)
return JSON.parse(content)
},
'ikea': {
// load your custom icon lazily
'unfold': `
`,
'home': `
`,
'bell': `
`,
'negotiation': `
`,
'arrow': `
`,
'arrow-bold': `
`,
'todo': `
`,
'expand': `
`,
'eye-off': `
`,
'contact': `
`,
'paper-clip': `
`,
'lock': `
`,
'calendar': `
`,
'calendar-outline': `
`,
'arrow-strong': `
`,
'arrow-slim': `
`,
'database': `
`,
'close': `
`,
'close-slim': `
`,
'detail': `
`,
'refresh': `
`,
'delete': `
`,
'clock': `
`,
'timeline-ongoing': `
`,
'timeline-approved': `
`,
'timeline-rejected': `
`,
'timeline-default': `
`,
'search': `
`,
'permission': `
`,
'add': `
`,
'edit': `
`,
'budget': `
`,
// unfold: () => fs.readFile('assets/svg/unfold.svg', 'utf-8'),
/* ... */
},
// 'my-other-icons': async (iconName) => {
// // your custom loader here. Do whatever you want.
// // for example, fetch from a remote server:
// return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
// },
'my-yet-other-icons': FileSystemIconLoader(
'assets/svg',
svg => svg.replace(/#fff/, 'currentColor'),
),
// Loading icon set
'custom-svg': async () => {
// Load icons
const iconSet = await importDirectory('src/assets/svg', {
prefix: 'svg',
})
// Clean up each icon
await iconSet.forEach(async (name) => {
const svg = iconSet.toSVG(name)
// Change color to `currentColor`
const blackColor = stringToColor('black')
await parseColors(svg, {
defaultColor: 'currentColor',
callback: (attr, colorStr, color) => {
// console.log('Color:', colorStr, color);
// Change black to 'currentColor'
if (
color
&& compareColors(color, blackColor)
)
return 'currentColor'
switch (color?.type) {
case 'none':
case 'current':
return color
}
throw new Error(
`Unexpected color "${colorStr}" in attribute ${attr}`,
)
},
})
// Optimise
await runSVGO(svg)
// Update paths for compatibility with old software
await deOptimisePaths(svg)
// Update icon in icon set
iconSet.fromSVG(name, svg)
})
// Export as IconifyJSON
return iconSet.export()
},
},
}),
presetUno(),
presetAttributify(),
],
transformers: [transformerDirectives(), transformerVariantGroup()],
rules: [
[
'bg-brand',
{
'background-color': 'var(--color-brand)',
},
],
[/^(?:text|color|c)-primary$/, () => ({ color: 'var(--color-brand)' })],
[/^text-(.+)px$/, ([, d]) => {
if (parseInt(d) < 12) {
return {
'font-size': `${d}px`,
'transform': `scale(calc(${parseInt(d)} / 12))`,
}
}
return {
'font-size': `${d}px`,
}
}],
[
'inline-icon',
{
'vertical-align': '-0.125em',
},
],
[
'icon16',
{
'font-size': '16px',
'line-height': '1em',
},
],
[
'icon24',
{
'font-size': '24px',
'line-height': '1em',
},
],
],
})
}
export default createConfig()