import { svgToURL } from '../lib/svg/url';
import { getIconsCSS, getIconsContentCSS } from '../lib/css/icons';
import type { IconifyJSON } from '@iconify/types';
describe('Testing CSS for multiple icons', () => {
test('Monotone icons', () => {
const iconSet: IconifyJSON = {
prefix: 'test-prefix',
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
'empty': {
body: '',
},
},
};
const expectedURL = (name: string, color = 'black') =>
svgToURL(
``
);
// Detect mode: mask
expect(
getIconsCSS(iconSet, ['activity', '123', 'airplane', 'missing'], {
format: 'expanded',
rules: {
visibility: 'visible',
},
})
).toBe(`.icon--test-prefix {
visibility: visible;
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon--test-prefix--activity {
--svg: ${expectedURL('activity')};
}
.icon--test-prefix--123 {
--svg: ${expectedURL('123')};
}
.icon--test-prefix--airplane {
--svg: ${expectedURL('airplane')};
}
/* Could not find icon: missing */
`);
// Force mode: background
expect(
getIconsCSS(iconSet, ['123'], {
format: 'expanded',
mode: 'background',
})
).toBe(`.icon--test-prefix {
display: inline-block;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.icon--test-prefix--123 {
background-image: ${expectedURL('123')};
}
`);
// Force background by setting color
expect(
getIconsCSS(iconSet, ['empty'], {
format: 'expanded',
color: 'red',
})
).toBe(`.icon--test-prefix {
display: inline-block;
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.icon--test-prefix--empty {
background-image: ${expectedURL('empty', 'red')};
}
`);
});
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, color = 'black') =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
})
).toBe(`.icon--bi {
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.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, color = 'black') =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
varName: null,
rules: {
visibility: 'visible',
},
})
).toBe(`.icon--bi {
visibility: visible;
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 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, color = 'black') =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
format: 'expanded',
iconSelector: '.test--{name}',
rules: {
visibility: 'visible',
},
})
).toBe(`.test--activity, .test--airplane-engines {
visibility: visible;
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.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, color = 'black') =>
svgToURL(
``
);
expect(
getIconsCSS(iconSet, ['activity'], {
format: 'expanded',
iconSelector: '.test--{name}',
})
).toBe(`.test--activity {
display: inline-block;
width: 1.5em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
--svg: ${expectedURL('activity')};
}
`);
});
test('Content', () => {
const iconSet: IconifyJSON = {
prefix: 'test-prefix',
icons: {
'123': {
body: '',
},
'activity': {
body: '',
},
'airplane': {
body: '',
},
'airplane-engines': {
body: '',
},
'empty': {
body: '',
},
},
};
const expectedURL = (name: string, color = 'black') =>
svgToURL(
``
);
expect(
getIconsContentCSS(
iconSet,
['activity', '123', 'airplane', 'whatever'],
{
height: 16,
format: 'expanded',
rules: {
display: 'inline-block',
},
}
)
).toBe(`.icon--test-prefix--activity::after {
display: inline-block;
content: ${expectedURL('activity')};
}
.icon--test-prefix--123::after {
display: inline-block;
content: ${expectedURL('123')};
}
.icon--test-prefix--airplane::after {
display: inline-block;
content: ${expectedURL('airplane')};
}
/* Could not find icon: whatever */
`);
});
});