[deps] Choose between antd/icons and react-icons

[yurishkuro]

Follow up on this discussion #1721 (comment)

We are probably using about 10-20 different icons in the project, pulled rather randomly from antd and react-icons (and within react-icons from completely different sets).

The proposal is to consolidate onto a single set, for example react-icons/fa (assuming it can accommodate our existing usage).

• run grep/awk to come up with an inventory of all icons in use
• compare and select a single set that can represent them with equivalent icons
• make code changes
• remove unused dependencies

[yurishkuro]

I tagged this as good first issue because individual steps could be considered as such.

[Mohith234]

I would like to give it a try @yurishkuro. I'm new to this project and found this good first issue.

[Kavinjsir]

Trying to follow the instructions to list the icons imported from both libraries:
(Numbers are the frequency of each icon)

@ant-design/icons	react-icons
2 ClockCircleOutlined	2 FaCheck
5 CloseOutlined	3 FaFilter
1 DoubleRightOutlined	2 FaTrash
3 DownOutlined	4 IoAlert
2 ExportOutlined	2 IoAndroidArrowBack
1 FileAddOutlined	4 IoAndroidLocate
2 FilterOutlined	2 IoAndroidOpen
1 InfoCircleOutlined	2 IoArrowRightA
3 LoadingOutlined	7 IoChevronDown
1 ProfileOutlined	5 IoChevronRight
1 QuestionCircleOutlined	3 IoHelp
1 RightOutlined	11 IoIosArrowDown
2 SearchOutlined	8 IoIosArrowRight
1 SmileFilled	2 IoIosFilingOutline
1 SmileOutlined	2 IoIosSearch
1 SmileTwoTone	2 IoNetwork
	2 MdExitToApp
	2 MdFileUpload
	2 MdInfoOutline
	2 MdKeyboardArrowDown
	2 MdKeyboardArrowRight
	2 MdKeyboardArrowRight
	3 MdVisibility
	5 MdVisibilityOff
	2 SortAmountAsc
	2 TiCancel

---

It feels like react-icons are comparatively used more frequently. Well, I'm curious if we can find a smooth way to substitute icons from either side..

---

FYI, below are the commands I'm trying to append with grep and awk:
(Plz fix me if I'm writing wrong 🙏)

For @ant-design/icons:

grep -r "from '@ant-design/icons'" ./packages/jaeger-ui | awk -F '{|}' '{ gsub(/ /, "", $2); split($2, a, ","); for(i in a) print a[i] }' | sort | uniq -c

For react-icons:

grep -r "from 'react-icons" ./packages/jaeger-ui | awk -F ' ' '{print $2}' | sort | uniq -c

[yurishkuro]

Pretty sure we're not using Smile. You need to grep in src, e.g. ./packages/jaeger-ui/src, otherwise you're also including dependencies in node_modules (it's unlikely we render things with icons from those, and even if we do they are not in scope of this ticket).

You also need to include plexus, not just jaeger-ui

[Kavinjsir]

Thx for pointing it out! Just adjusted the commands to focus on code in jaeger-ui and plexus:

# @ant-design/icons
grep -r "from '@ant-design/icons'" ./packages/jaeger-ui/src ./packages/plexus/src | awk -F '{|}' '{ gsub(/ /, "", $2); split($2, a, ","); for(i in a) print a[i] }' | sort | uniq -c

# react-icons
grep -r "from 'react-icons" ./packages/jaeger-ui/src ./packages/plexus/src | awk -F ' ' '{print $2}' | sort | uniq -c

Here is the result I got:

@ant-design/icons	react-icons
2 ClockCircleOutlined	1 FaCheck
5 CloseOutlined	2 FaFilter
1 DoubleRightOutlined	1 FaTrash
3 DownOutlined	2 IoAlert
2 ExportOutlined	1 IoAndroidArrowBack
1 FileAddOutlined	2 IoAndroidLocate
2 FilterOutlined	1 IoAndroidOpen
1 InfoCircleOutlined	1 IoArrowRightA
3 LoadingOutlined	4 IoChevronDown
1 ProfileOutlined	3 IoChevronRight
1 QuestionCircleOutlined	2 IoHelp
1 RightOutlined	6 IoIosArrowDown
2 SearchOutlined	4 IoIosArrowRight
	1 IoIosFilingOutline
	1 IoIosSearch
	1 IoNetwork
	1 MdExitToApp
	1 MdFileUpload
	1 MdInfoOutline
	1 MdKeyboardArrowDown
	1 MdKeyboardArrowRight
	2 MdVisibility
	3 MdVisibilityOff
	1 SortAmountAsc
	1 TiCancel

[yurishkuro]

@Kavinjsir for react-icons, I suggest including the namespace, e.g. io/IoAndroidLocate vs. io5/IoAndroidLocate, since they have the same names

The io/io5 sets seem the most promising. If we can map all other icons into one of them, we'd have a concrete plan how to proceed.

[Kavinjsir]

@yurishkuro Will this work if we try to include the namespace like following?

❯ grep -r "from 'react-icons" ./packages/jaeger-ui/src ./packages/plexus/src | awk -F ' ' '{split($4,a,"/"); icon=a[4]; gsub(/;/, "", icon); namespace=a[3]; print namespace, $2}' | sort | uniq -c | sort -nr
   6 io IoIosArrowDown
   4 io IoIosArrowRight
   4 io IoChevronDown
   3 md MdVisibilityOff
   3 io IoChevronRight
   2 md MdVisibility
   2 io IoHelp
   2 io IoAndroidLocate
   2 io IoAlert
   2 fa FaFilter
   1 ti TiCancel
   1 md MdKeyboardArrowRight
   1 md MdKeyboardArrowDown
   1 md MdInfoOutline
   1 md MdFileUpload
   1 md MdExitToApp
   1 io IoNetwork
   1 io IoIosSearch
   1 io IoIosFilingOutline
   1 io IoArrowRightA
   1 io IoAndroidOpen
   1 io IoAndroidArrowBack
   1 fa SortAmountAsc
   1 fa FaTrash
   1 fa FaCheck

Seems like we haven't applied io5 so far?
The choice of io/io5 sounds good to me 👍🏼 .
I can check with the available alternatives for icons from other namespaces later.

[jriyyya]

I'd like to recommend Google Fonts - Material Icons
Lightweight to use and accomadates all the necessary icons. easy to implement as well even without a dependancy.

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:sort:FILL@0;wght@400;GRAD@0;opsz@48&icon.query=cancel&icon.platform=android

I have not included some of the io set icons as they were not visible on the react-icons viewer thus I could not find a matching alternative though I'm quite certain that there would exist one for each.

Here is a table to represent the matching icons I found in google fonts

react-icons	Google Fonts - Material Icons
faCheck	done
faFilter	filter_alt
faTrash	delete
IoAlter	priority_high
IoArrowRightA	info
IoChevronDown	expand_more
IoChevronRight	chevron_right
IoHelp	help
MdExitToApp	exit_to_app
MdFileUpload	upload
MdInfoOutline	info
MdKeyboardArrowDown	expand_more
MdKeyboardArrowRight	keyboard_arrow_right
MdVisibility	visibility
MdVisibilityOff	visibility_off
SortAmountAsc	SortAmountAsc
TiCancel	block

@ant-design/icons	Google Fonts - Material Icons
ClockCircleOutlined	schedule
CloseOutlined	close
DoubleRightOutlined	double_arrow
DownOutlined	keyboard_arrow_down
ExportOutlined	ios_share
FileAddOutlined	filter_alt
FileAddOutlined	note_add
InfoCircleOutlined	info
LoadingOutlined	-
ProfileOutlined	list_alt
QuestionCircleOutlined	help
RightOutlined	chevron_right
SearchOutlined	search

Only one alternative was not found - LoadingOutlined as it was a animated icon, and Material Icons doesn't support that.

[yurishkuro]

My suggesting would be to converge all icons on react-icons/io family, since this is the family already used the most in Jaeger.

[priyanshu-kun]

@yurishkuro I create a document which contains all icons set that are being used in code base and their io5 alternatives as well. But there are some icons that I'm not able to find in io5 set, Could you please take a look upon the doc?

https://docs.google.com/document/d/15KcGEMfOCl1AmyhMI5T0EuYYwLZz-pGEibiU2uS87Dw/edit?usp=sharing

[yurishkuro]

I don't quite follow the layout of your doc, esp. when some rows have more than 2 icons. It would be better to have these columns:

1. icon name
2. library / family
3. picture
4. corresponding io5 picture & name or NOT FOUND

[yurishkuro]

the icon name is especially important as otherwise it's very difficult to make your doc actionable - can't search the code for a picture.

[priyanshu-kun]

Got it! Let me fix that.

[priyanshu-kun]

@yurishkuro Now I provide as much details as I can, But the table stretch quite a bit but it make sense now. I put icons in the columns to their corresponding family name.
https://docs.google.com/document/d/15KcGEMfOCl1AmyhMI5T0EuYYwLZz-pGEibiU2uS87Dw/edit?usp=sharing

I hope it make sense to you as well

[yurishkuro]

@priyanshu-kun looks good (I don't think you needed so many columns in the table, the current family is obvious from the icon name). I left questions on some icons.

Do you want to start making changes by swapping the icons where there's no concern?

[priyanshu-kun]

@yurishkuro Yeah I would love do that! And I make some changes in doc

[yurishkuro]

@priyanshu-kun after #1771 merged, I am seeing these as remaining places. Does that match your understanding?

$ grx "'@ant-design/icons'" packages/*/src/
packages/jaeger-ui/src//components/common/LoadingIndicator.tsx:16:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/common/CopyIcon.tsx:23:import { CopyOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/ArchiveNotifier/index.tsx:17:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/ArchiveNotifier/index.test.js:18:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx:18:import { LinkOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx:17:import { DoubleRightOutlined } from '@ant-design/icons';

[priyanshu-kun]

@priyanshu-kun after #1771 merged, I am seeing these as remaining places. Does that match your understanding?

$ grx "'@ant-design/icons'" packages/*/src/
packages/jaeger-ui/src//components/common/LoadingIndicator.tsx:16:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/common/CopyIcon.tsx:23:import { CopyOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/ArchiveNotifier/index.tsx:17:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/ArchiveNotifier/index.test.js:18:import { LoadingOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx:18:import { LinkOutlined } from '@ant-design/icons';
packages/jaeger-ui/src//components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx:17:import { DoubleRightOutlined } from '@ant-design/icons';

Actually, I missed that CopyOutlined and LinkOutlined icons. And the rest of the icons, I could not find them in the io5 set. I'll fix them with remaining icons.
should I start to find alternative icons for those controversial icons?

[yurishkuro]

Let's pick another family then for the remaining ones, preferably with MIT license.