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('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( `${iconSet.icons[ name ].body.replace(/currentColor/g, color)}` ); // Detect mode: mask expect( getIconsCSS(iconSet, ['activity', '123', 'airplane'], { format: 'expanded', }) ).toBe(`.icon--test-prefix { 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')}; } `); // 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( `${iconSet.icons[ name ].body.replace(/currentColor/g, color)}` ); 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( `${iconSet.icons[ name ].body.replace(/currentColor/g, color)}` ); 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-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( `${iconSet.icons[ name ].body.replace(/currentColor/g, color)}` ); 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-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( `${iconSet.icons[ name ].body.replace(/currentColor/g, color)}` ); 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')}; } `); }); });