Improve Icon component and use it everywhere

[slaweet]

Current behavior

• the icons that are showing extremely big on the toolbox demo page is probably because they only have the viewbox property set on the
• Icon names are not consistent (some are kebab_case some cammelCase)
• Icon component is not used in all pages that show some icon, instead they import svg from '../../utils/svgIcons:

$ git grep 'utils/svgIcons'
src/components/accountVisual/index.js:import svg from '../../utils/svgIcons';
src/components/bookmark/bookmark.js:import svg from '../../utils/svgIcons';
src/components/bookmarkV2/index.js:import svg from '../../utils/svgIcons';
src/components/dashboardV2/recentTransactions/recentTransactions.js:import svg from '../../../utils/svgIcons';
src/components/delegatesListView/voteCheckboxV2.js:import svgIcons from '../../utils/svgIcons';
src/components/headerV2/headerV2.js:import svg from '../../utils/svgIcons';
src/components/hwWalletLogin/loadingIcon.js:import svgIcons from '../../utils/svgIcons';
src/components/hwWalletLogin/selectAccount/accountCard.js:import svg from '../../../utils/svgIcons';
src/components/hwWalletLogin/selectDevice.js:import svgIcons from '../../utils/svgIcons';
src/components/newsFeedV2/news.js:import svg from '../../utils/svgIcons';
src/components/registerV2/backupPassphrase.js:import svgIcons from '../../utils/svgIcons';
src/components/requestV2/requestV2.js:import svg from '../../utils/svgIcons';
src/components/searchBarV2/transactions.js:import svg from '../../utils/svgIcons';
src/components/sendV2/form/form.js:import svg from '../../../utils/svgIcons';
src/components/sendV2/transactionStatus/statusMessages.js:import svg from '../../../utils/svgIcons';
src/components/singleTransactionV2/singleTransactionV2.js:import svg from '../../utils/svgIcons';
src/components/statusBar/statusBar.js:import svg from '../../utils/svgIcons';
src/components/toolbox/calendar/monthView.js:import svg from '../../../utils/svgIcons';
src/components/toolbox/calendar/yearView.js:import svg from '../../../utils/svgIcons';
src/components/toolbox/checkBox/index.js:import svgIcons from '../../../utils/svgIcons';
src/components/toolbox/feedback/feedback.js:import svg from '../../../utils/svgIcons';
src/components/topBar/constants.js:import svg from '../../utils/svgIcons';
src/components/topBar/navigationButtons.js:import svg from '../../utils/svgIcons';
src/components/topBar/topBar.js:import svg from '../../utils/svgIcons';
src/components/transactions/typeFigure/TransactionTypeFigure.js:import svg from '../../../utils/svgIcons';
src/components/transactionsV2/filters/amountFieldGroup.js:import svg from '../../../utils/svgIcons';
src/components/transactionsV2/filters/dateFieldGroup.js:import svg from '../../../utils/svgIcons';
src/components/transactionsV2/filters/filterContainer.js:import svg from '../../../utils/svgIcons';
src/components/transactionsV2/filters/messageFieldGroup.js:import svg from '../../../utils/svgIcons';
src/components/transactionsV2/transactionTypeV2.js:import svg from '../../utils/svgIcons';
src/components/wallet/walletDetails.js:import svg from '../../utils/svgIcons';

Expected behavior

• Icons are the size they are meant to be out of the box
• Clean up the icon names to use cammelCase in https://github.com/LiskHQ/lisk-hub/blob/0a5ec3139475d563a2a23dec0bd2591f079c9539/src/utils/svgIcons.js#L55-L58
• Delete src/utils/svgIcons.js and move it's content to https://github.com/LiskHQ/lisk-hub/blob/development/src/components/toolbox/icon/index.js
• All pages should be updated to use the new Icon component

[reyraa]

In order to simplify the icon design process and have a shared set of icons between Mobile and Hub, I'd like to change this slightly to use font icons. I've already requested designers to change the icons.