Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(icon): icon names with numbers are correctly converted to kebab case #1339

Merged
merged 2 commits into from
Mar 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 39 additions & 29 deletions src/components/icon/test/utils.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,78 +86,88 @@ describe('getName', () => {
describe('addIcons', () => {
it('should add an svg to the icon cache', () => {
const testData = 'stubbed data';

expect(getIconMap().get('logo-ionic')).toEqual(undefined);

addIcons({ 'logo-ionic': 'stubbed data' });

expect(getIconMap().get('logo-ionic')).toEqual(testData);
});

it('should add kebab and camel case names to the icon cache', () => {
const logoIonitron = 'stubbed data';

expect(getIconMap().get('logo-ionitron')).toEqual(undefined);
expect(getIconMap().get('logoIonitron')).toEqual(undefined);

addIcons({ logoIonitron });

expect(getIconMap().get('logo-ionitron')).toEqual(logoIonitron);
expect(getIconMap().get('logoIonitron')).toEqual(logoIonitron);

const logoIonitron0 = 'stubbed data 0'

expect(getIconMap().get('logo-ionitron-0')).toEqual(undefined);
expect(getIconMap().get('logoIonitron0')).toEqual(undefined);

addIcons({ logoIonitron0 });

expect(getIconMap().get('logo-ionitron-0')).toEqual(logoIonitron0);
expect(getIconMap().get('logoIonitron0')).toEqual(logoIonitron0);
});

it('should map to a name that does not match the svg', () => {
const logoIonitron = 'stubbed data';

expect(getIconMap().get('my-fun-icon')).toEqual(undefined);

addIcons({ 'my-fun-icon': logoIonitron });

expect(getIconMap().get('my-fun-icon')).toEqual(logoIonitron);
});

it('should map to an explicit camel case name', () => {
const logoIonitron = 'stubbed data';

expect(getIconMap().get('myCoolIcon')).toEqual(undefined);

addIcons({ 'myCoolIcon': logoIonitron });

expect(getIconMap().get('myCoolIcon')).toEqual(logoIonitron);
});

it('should not warn when mapping the same icon twice', () => {
const spy = jest.spyOn(console, 'warn');

const myIcon = 'my-icon';

expect(spy).not.toHaveBeenCalled();

addIcons({ myIcon });

expect(spy).not.toHaveBeenCalled();

addIcons({ myIcon });

expect(spy).not.toHaveBeenCalled();
});

it('should not overwrite icons', () => {
const spy = jest.spyOn(console, 'warn');

const logoA = 'logo a';
const logoB = 'logo b';

expect(spy).not.toHaveBeenCalled();

expect(getIconMap().get('logo-a')).toEqual(undefined);

addIcons({ 'logo-a': logoB, logoA });

expect(getIconMap().get('logo-a')).toEqual(logoB);
expect(getIconMap().get('logoA')).toEqual(logoA);

expect(spy).toHaveBeenCalled();
});

});
10 changes: 5 additions & 5 deletions src/components/icon/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export const getIconMap = (): Map<string, string> => {
};

export const addIcons = (icons: { [name: string]: string; }) => {
Object.keys(icons).forEach(name => {
Object.keys(icons).forEach(name => {
addToIconMap(name, icons[name]);

/**
* Developers can also pass in the SVG object directly
* and Ionicons can map the object to a kebab case name.
Expand All @@ -31,7 +31,7 @@ export const addIcons = (icons: { [name: string]: string; }) => {
* Using name="addCircleOutline" is valid too, but the
* kebab case naming is preferred.
*/
const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z0-9])/g, "$1-$2").toLowerCase();
if (name !== toKebabCase) {
addToIconMap(toKebabCase, icons[name]);
}
Expand All @@ -40,12 +40,12 @@ export const addIcons = (icons: { [name: string]: string; }) => {

const addToIconMap = (name: string, data: any) => {
const map = getIconMap();

const existingIcon = map.get(name);

if (existingIcon === undefined) {
map.set(name, data);

/**
* Importing and defining the same icon reference
* multiple times should not yield a warning.
Expand Down
Loading