import { svgToURL } from '../lib/svg/url';
import { getIconsCSS } from '../lib/css/icons';
import type { IconifyJSON } from '@iconify/types';
describe('Testing CSS for multiple icons', () => {
test('Background', () => {
const iconSet: IconifyJSON = {
prefix: 'test-prefix',
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
'empty': {
body: '',
},
},
};
const expectedURL = (name: string) =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['empty', '123', 'airplane'], {
format: 'expanded',
mode: 'background',
})
).toBe(`.icon--test-prefix {
display: inline-block;
width: 1em;
height: 1em;
background: no-repeat center / 100%;
}
.icon--test-prefix--empty {
background-image: ${expectedURL('empty')};
}
.icon--test-prefix--123 {
background-image: ${expectedURL('123')};
}
.icon--test-prefix--airplane {
background-image: ${expectedURL('airplane')};
}
`);
});
test('Mask', () => {
const iconSet: IconifyJSON = {
prefix: 'bi',
info: {
name: 'Bootstrap Icons',
total: 1953,
version: '1.10.2',
author: {
name: 'The Bootstrap Authors',
url: 'https://github.com/twbs/icons',
},
license: {
title: 'MIT',
spdx: 'MIT',
url: 'https://github.com/twbs/icons/blob/main/LICENSE.md',
},
samples: ['graph-up', 'card-image', 'code-slash'],
height: 16,
category: 'General',
palette: false,
},
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
},
};
const expectedURL = (name: string) =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
})
).toBe(`.icon--bi {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: no-repeat center / 100%;
mask: no-repeat center / 100%;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
}
.icon--bi--activity {
--svg: ${expectedURL('activity')};
}
.icon--bi--airplane-engines {
--svg: ${expectedURL('airplane-engines')};
}
`);
});
test('Mask with custom config', () => {
const iconSet: IconifyJSON = {
prefix: 'bi',
info: {
name: 'Bootstrap Icons',
total: 1953,
version: '1.10.2',
author: {
name: 'The Bootstrap Authors',
url: 'https://github.com/twbs/icons',
},
license: {
title: 'MIT',
spdx: 'MIT',
url: 'https://github.com/twbs/icons/blob/main/LICENSE.md',
},
samples: ['graph-up', 'card-image', 'code-slash'],
height: 16,
category: 'General',
palette: false,
},
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
},
width: 24,
};
const expectedURL = (name: string) =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
varName: null,
})
).toBe(`.icon--bi {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: no-repeat center / 100%;
mask: no-repeat center / 100%;
}
.icon--bi.icon--bi--activity {
width: 1.5em;
-webkit-mask-image: ${expectedURL('activity')};
mask-image: ${expectedURL('activity')};
}
.icon--bi.icon--bi--airplane-engines {
width: 1.5em;
-webkit-mask-image: ${expectedURL('airplane-engines')};
mask-image: ${expectedURL('airplane-engines')};
}
`);
});
test('Mask with custom selector', () => {
const iconSet: IconifyJSON = {
prefix: 'bi',
info: {
name: 'Bootstrap Icons',
total: 1953,
version: '1.10.2',
author: {
name: 'The Bootstrap Authors',
url: 'https://github.com/twbs/icons',
},
license: {
title: 'MIT',
spdx: 'MIT',
url: 'https://github.com/twbs/icons/blob/main/LICENSE.md',
},
samples: ['graph-up', 'card-image', 'code-slash'],
height: 16,
category: 'General',
palette: false,
},
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
},
width: 24,
};
const expectedURL = (name: string) =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
iconSelector: '.test--{name}',
})
).toBe(`.test--activity, .test--airplane-engines {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: no-repeat center / 100%;
mask: no-repeat center / 100%;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
}
.test--activity {
width: 1.5em;
--svg: ${expectedURL('activity')};
}
.test--airplane-engines {
width: 1.5em;
--svg: ${expectedURL('airplane-engines')};
}
`);
});
test('Duplicate selectors', () => {
const iconSet: IconifyJSON = {
prefix: 'bi',
info: {
name: 'Bootstrap Icons',
total: 1953,
version: '1.10.2',
author: {
name: 'The Bootstrap Authors',
url: 'https://github.com/twbs/icons',
},
license: {
title: 'MIT',
spdx: 'MIT',
url: 'https://github.com/twbs/icons/blob/main/LICENSE.md',
},
samples: ['graph-up', 'card-image', 'code-slash'],
height: 16,
category: 'General',
palette: false,
},
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
},
width: 24,
};
const expectedURL = (name: string) =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity'], {
format: 'expanded',
iconSelector: '.test--{name}',
})
).toBe(`.test--activity {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: no-repeat center / 100%;
mask: no-repeat center / 100%;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
}
.test--activity {
width: 1.5em;
--svg: ${expectedURL('activity')};
}
`);
});
});