[SDPA-4520] refactor icon component to improve loading performance #774
Conversation
…-4235-optimise-svg-icon-component
| @@ -112,7 +115,7 @@ storiesOf('Atoms/Icon', module) | |||
| 'xls', | |||
| 'xlsm', | |||
| 'xlsx', | |||
| 'youtube', | |||
| 'youtube_channel', | |||
There was a problem hiding this comment.
Hey @rubyllamadora rename this may will cause issue as I remembered one logic use BE string value to pick youtube icon, rename icon may cause the logic fail.
| <% } %> | ||
|
|
||
| <% if (options.quickexit) { %> | ||
| rplOptions.quickexit = options.quickexit | ||
| <% } %> | ||
| <% } %> |
There was a problem hiding this comment.
I think this indention was added accidentally.
| addCustomIcons(require.context('../assets/ripple-icon/', true, /\.svg$/)) | ||
| <% } %> | ||
| // Add custom icons to library. | ||
| addCustomIcons(require.context('../assets/ripple-icon/', true, /\.svg$/)) |
There was a problem hiding this comment.
So both svg and js custom icons will work for customer site. Will JS one be load automatically?
There was a problem hiding this comment.
Yes, JS will be loaded automatically as they are imported in Atoms/Icon/index.js
import './icons/index.js'
There was a problem hiding this comment.
@tim-yao, I added below require.context which seems to work fine in my local.
examples/vic-gov-au/nuxt.config.js
Outdated
| ripple: {}, | ||
| ripple: { | ||
| customIcon: true | ||
| }, |
There was a problem hiding this comment.
This example is nice. Can you please move it to https://github.com/dpc-sdp/ripple/tree/master/examples/basic-examples ?
…les to test locally
|
300ms saved on homepage local test. 💯 |
packages/ripple-nuxt-tide/README.md
Outdated
| ``` | ||
|
|
||
| Update the name of the icon - this will be used for symbol prop later, `width`, `height`, `paths` and `polygons` accordingly. | ||
| Add this to `assets/rpl_icon/index.js` |
There was a problem hiding this comment.
@rubyllamadora Any reason to change the directory name from ripple-icon to rpl_icon ?
There was a problem hiding this comment.
Ooops. This should be ripple-icon. I'll update.
packages/ripple-nuxt-tide/README.md
Outdated
| @@ -172,7 +172,7 @@ Icon.register({ | |||
| ``` | |||
|
|
|||
| Update the name of the icon - this will be used for symbol prop later, `width`, `height`, `paths` and `polygons` accordingly. | |||
| Add this to `assets/rpl_icon/index.js` | |||
| Add this to `assets/ripple_icon/index.js` | |||
There was a problem hiding this comment.
Hey @rubyllamadora ripple-icon instead of ripple_icon? Where is the code to load it? I am afraid we need a test for it as well.
There was a problem hiding this comment.
ripple-icon!. I might just revert this README update as this won't be rolled out to clients yet? It will still be svg files for them until we convert them to the new JS format.
There was a problem hiding this comment.
The example I added is inside basic-examples for enabled customIcon. I have JS files created in my local only as I think it is irrelevant to commit it for now. We still need an extra script to process in replacement for addIconsToLibrary() once we roll this out.
| @@ -0,0 +1,13 @@ | |||
| import Icon from '../../../../packages/components/Atoms/Icon/Icon.vue' | |||
There was a problem hiding this comment.
I'll replace this with @dpc-sdp/ripple-icon/Icon.vue once this is good to merge. This is only for this branch to work.
| import RplIcon from '../../../packages/components/Atoms/Icon/index.js' | ||
| // Imports below will be moved to ripple-nux-ui so we can enable/disable customIcon. | ||
| import './../assets/ripple-icon/custom_icon_lock_open' | ||
| import './../assets/ripple-icon/custom_icon_search' |
There was a problem hiding this comment.
@tim-yao we just need to import custom icons like this. Below is my test page.
JIRA issue: https://digital-engagement.atlassian.net/browse/SDPA-4520
Changed
Storybook: https://storybook-ripple-pr-774.lagoon.vicsdp.amazee.io/?path=/story/atoms-icon--icon-library
FE: https://app-ripple-pr-774.lagoon.vicsdp.amazee.io/demo-landing-page
TODO
Screenshots
backward compatible support