import {
defineConfig,
presetIcons,
presetAttributify,
presetUno,
transformerDirectives,
transformerVariantGroup,
UserConfig,
} from 'unocss';
import { Theme } from 'unocss/preset-mini';
import { generateUnocssTheme } from '@itshixun/qst-ui-system';
export const iconCollectionName = 'uplus';
// 自定义svg的图标
export const iconCollection = {
/** uplus logo */
logo: `
`,
'chevron-up': `
`,
'chevron-down': `
`,
'chevron-left': `
`,
'chevron-right': `
`,
dashboard: ``,
};
const defaultSizes = {
'spacing-xxxs': '4px',
'spacing-xxs': '8px',
'spacing-xs': '12px',
'spacing-sm': '16px',
'spacing-md': '20px',
spacing: '24px',
'spacing-lg': '28px',
'spacing-xl': '32px',
'spacing-xxl': '36px',
'spacing-xxxl': '40px',
'exercise-header': '56px',
};
export const theme: Theme = Object.assign(generateUnocssTheme(), {
breakpoints: {
sm: '640px',
md: '768px',
df: '900px',
lg: '1024px',
xl: '1280px',
xxl: '1536px',
xxxl: '1860px',
},
});
/** 将上方自定义的svg图表类明生成列表，传给下面配置中的safeList，保证动态嵌入的自定义图标样式有效 */
export const getIconCollectionList = () => {
const list: string[] = [];
for (const key in iconCollection) {
list.push(`i-${iconCollectionName}:${key}`);
}
return list;
};
const config: UserConfig = defineConfig({
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1,
warn: true,
collections: {
[iconCollectionName]: iconCollection,
},
}),
],
// unocss can't render icon class dynamically, when adding menu icon class
// in route.meta.menuConfig, you must also add the icon class in safelist.
safelist: [...getIconCollectionList()],
transformers: [transformerDirectives(), transformerVariantGroup()],
theme,
shortcuts: [
{
'flex-row-center': 'flex flex-row items-center justify-center',
'flex-row-between': 'flex flex-row items-center justify-between',
'flex-col-center': 'flex flex-col items-center justify-center',
'flex-col-between': 'flex flex-col items-center justify-between',
},
],
});
export default config;