{"id":6172,"date":"2024-05-22T12:51:50","date_gmt":"2024-05-22T16:51:50","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6172"},"modified":"2024-05-22T12:51:52","modified_gmt":"2024-05-22T16:51:52","slug":"automating-ionicon-usage-in-angular","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular","title":{"rendered":"Automating Ionicon Usage in Angular"},"content":{"rendered":"\n<p><em>Masahiko Sakakibara is a member of the Ionic community, a recognized Ionic Developer Expert, and an organizer of the Ionic Japan User Group. Masahiko has also contributed substantially to the Ionic community through his work translating the documentation for Ionic Framework, Stencil, and Capacitor for the Japanese community.<\/em><\/p>\n\n\n\n<p>In a modern development workflow, reducing bundle size to optimize performance is key to providing the best user experience. However, In the realm of Ionic Standalone Components, manually running <code>addIcons<\/code> to utilize IonIcons can be repetitive and cumbersome for developers.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To simplify this process, I\u2019ve devised a custom approach that trims bundle size and improves app speed. I\u2019ve included a brief tutorial below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">@Component({\n  ...,\n  imports: [IonIcon,...]\n})\nexport class ExamplePage {\n  constructor(){\n    addIcons({accessibilityOutline})\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>The method shown above does trim down bundle size and speed up the app; however, the repetitive task of managing <code>addIcons<\/code> across multiple components adds extra overhead. To fix this, I&#8217;ve developed a solution: the <code>ionic-angular-collect-icons<\/code> package. This tool is designed to help minimize bundle size while improving the overall developer experience.<\/p>\n\n\n\n<p>Begin by installing <code>@rdlabo\/ionic-angular-collect-icons<\/code> and initializing it with the command below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @rdlabo\/ionic-angular-collect-icons --sve-dev\nnpx @rdlabo\/ionic-angular-collect-icons --initialize true<\/code><\/pre>\n\n\n\n<p>And set npm script:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">  &quot;scripts&quot;: {\n    &quot;ng&quot;: &quot;ng&quot;,\n    &quot;start&quot;: &quot;ng serve&quot;,\n    &quot;build&quot;: &quot;ng build&quot;,\n+   &quot;prebuild&quot;: &quot;npx @rdlabo\/ionic-angular-collect-icons&quot;\n  },<\/code><\/pre>\n\n\n\n<p>Next, update your npm scripts as follows to eliminate manually managing <code>addIcons<\/code>:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Behind the Scenes<\/strong><\/h3>\n\n\n\n<p><strong>1) The Role of <code>addIcons<\/code>:<\/strong><\/p>\n\n\n\n<p><code>addIcons<\/code> is how you register icons\u2014mapping icon names to SVG code\u2014directly into Ionicons within the Window object. A quick example with <code>addIcons({ accessibilityOutline })<\/code> looks something like this:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">window.Ionicons.accessibilityOutline = &quot;data:image\/svg+xml;utf8,&lt;svg xmlns=&#039;http:\/\/www.w3.org\/2000\/svg&#039; class=&#039;ionicon&#039; viewBox=&#039;0 0 512 512&#039;&gt;&lt;circle stroke-linejoin=&#039;round&#039; cx=&#039;256&#039; cy=&#039;56&#039; r=&#039;40&#039; class=&#039;ionicon-fill-none ionicon-stroke-width&#039;\/&gt;&lt;path stroke-linejoin=&#039;round&#039; d=&#039;M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94-1-17 14-28 29-24 0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79 0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18-6 10.75-5 29.53-2.1 47.59l5.9 29.63 37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83z&#039; class=&#039;ionicon-fill-none ionicon-stroke-width&#039;\/&gt;&lt;\/svg&gt;&quot;<\/code><\/pre>\n\n\n\n<p>From this point forward, you can call Ionicons without the overhead of unnecessary SVGs cluttering your bundle, which translates to quicker load times.<\/p>\n\n\n\n<p><strong>2) Why Managing <code>addIcons<\/code> Matters:<\/strong><\/p>\n\n\n\n<p>The placement of <code>addIcons<\/code>\u2014whether in <code>ngOnInit<\/code>, the constructor, or elsewhere\u2014isn&#8217;t a big deal as long as it runs before the icon is needed. The trick lies in efficiently managing which icons are registered. Keeping your bundle lean means being diligent about removing unused icons and adding new ones only as needed.<\/p>\n\n\n\n<p>Missed adding icons with <code>addIcons<\/code> but everything looks fine? That could be because they pre-loaded with the component, risking display issues on direct URL access.<\/p>\n\n\n\n<p>Despite these nuances, judicious use of <code>addIcons<\/code> remains a solid strategy for keeping your app lean and mean.<\/p>\n\n\n\n<p><strong>3) The Lazy Way Out:<\/strong><\/p>\n\n\n\n<p>What&#8217;s the easiest, albeit least efficient, method? Simply use <code>addIcons<\/code> to load everything without a second thought:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import * as allIcons from &#039;ionicons\/icons&#039;;\naddIcons(allIcons)<\/code><\/pre>\n\n\n\n<p>Sure, all your icons are on display, but at what cost? (Answer: a big bloated bundle)<\/p>\n\n\n\n<p><strong>4) A Balanced Approach:<\/strong><\/p>\n\n\n\n<p>Loading every single Ionicon is overkill, both in terms of size and headache. My compromise? Load just the icons used in your templates at app launch, using the following steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Load all component templates<\/li>\n\n\n\n<li>Create a unique list of IonIcons in use in the template<\/li>\n\n\n\n<li>run <code>addIcons<\/code> with the list at app launch<\/li>\n\n\n\n<li>Create a CLI that automatically executes it<\/li>\n<\/ol>\n\n\n\n<p>&nbsp;I&#8217;ve also put together a CLI to automate this, sparing you the manual toil.<\/p>\n\n\n\n<p>For development, it&#8217;s okay to load all icons for convenience. But when it comes to production time, switch to this more selective method to keep things efficient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The CLI Magic:<\/strong><\/h3>\n\n\n\n<p>This tool scans your templates for <code>ion-icon<\/code> elements, collects the used icons, and generates a <code>use-icons.ts<\/code> file. You then load this file once, and voil\u00e0\u2014icon management made easy.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { environment } from &#039;..\/environments\/environment&#039;;\nimport { addIcons } from &#039;ionicons&#039;;\nimport * as allIcons from &#039;ionicons\/icons&#039;;\nimport * as useIcons from &#039;..\/use-icons&#039;;\n\naddIcons(environment.production ? useIcons : allIcons);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Initialization Made Easy:<\/strong><\/h3>\n\n\n\n<p>Running the CLI with <code>--initialize true<\/code> sets everything up for you:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx @rdlabo\/ionic-angular-collect-icons<\/code><\/pre>\n\n\n\n<p>This generates <code>src\/use-icons.ts<\/code>. Import this file in your main setup, and you&#8217;re all set. Remember to clean up any other <code>addIcons<\/code> calls in your constructors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Takeaway:<\/strong><\/h3>\n\n\n\n<p>In the race to develop quickly and maintain speedy app performance, finding the right balance is key. Reducing bundle size can be critical in maximizing app speed and loading efficiency, but manually reducing it is often cumbersome. Hopefully this plugin makes that balancing act a bit easier.<\/p>\n\n\n\n<p><em>To follow Masahiko and the work he does for the Japanese Ionic community, be sure to check out his <\/em><a href=\"https:\/\/twitter.com\/rdlabo\"><em>Twitter<\/em><\/a><em>!&nbsp;<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.<\/p>\n","protected":false},"author":70,"featured_media":6176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"576958","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/automating-ionicon-usage-in-angular\/241934","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,124],"tags":[23,25],"class_list":["post-6172","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-tutorials","tag-framework","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Automating Ionicon Usage in Angular - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automating Ionicon Usage in Angular\" \/>\n<meta property=\"og:description\" content=\"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-22T16:51:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-22T16:51:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image-1024x512.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Masahiko Sakakibara\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Masahiko Sakakibara\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\"},\"author\":{\"name\":\"Masahiko Sakakibara\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2d3653d94fc25f53608288b6ac6ec15c\"},\"headline\":\"Automating Ionicon Usage in Angular\",\"datePublished\":\"2024-05-22T16:51:50+00:00\",\"dateModified\":\"2024-05-22T16:51:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\"},\"wordCount\":625,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png\",\"keywords\":[\"Framework\",\"Tutorials\"],\"articleSection\":[\"All\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\",\"url\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\",\"name\":\"Automating Ionicon Usage in Angular - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png\",\"datePublished\":\"2024-05-22T16:51:50+00:00\",\"dateModified\":\"2024-05-22T16:51:52+00:00\",\"description\":\"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automating Ionicon Usage in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/2d3653d94fc25f53608288b6ac6ec15c\",\"name\":\"Masahiko Sakakibara\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0987cde03196349491ad66e060c17e1f71b66f567597c8b3593dc9b2961e04b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0987cde03196349491ad66e060c17e1f71b66f567597c8b3593dc9b2961e04b?s=96&d=mm&r=g\",\"caption\":\"Masahiko Sakakibara\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/rdlabo\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automating Ionicon Usage in Angular - Ionic Blog","description":"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular","og_locale":"en_US","og_type":"article","og_title":"Automating Ionicon Usage in Angular","og_description":"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.","og_url":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular","og_site_name":"Ionic Blog","article_published_time":"2024-05-22T16:51:50+00:00","article_modified_time":"2024-05-22T16:51:52+00:00","og_image":[{"width":1024,"height":512,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image-1024x512.png","type":"image\/png"}],"author":"Masahiko Sakakibara","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Masahiko Sakakibara","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular"},"author":{"name":"Masahiko Sakakibara","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2d3653d94fc25f53608288b6ac6ec15c"},"headline":"Automating Ionicon Usage in Angular","datePublished":"2024-05-22T16:51:50+00:00","dateModified":"2024-05-22T16:51:52+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular"},"wordCount":625,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png","keywords":["Framework","Tutorials"],"articleSection":["All","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular","url":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular","name":"Automating Ionicon Usage in Angular - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png","datePublished":"2024-05-22T16:51:50+00:00","dateModified":"2024-05-22T16:51:52+00:00","description":"Rather than manually running addIcons to utilize IonIcons, try this approach that trims bundle size and improves app speed.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/automating-ionicon-usage-in-angular#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Automating Ionicon Usage in Angular"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/2d3653d94fc25f53608288b6ac6ec15c","name":"Masahiko Sakakibara","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0987cde03196349491ad66e060c17e1f71b66f567597c8b3593dc9b2961e04b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0987cde03196349491ad66e060c17e1f71b66f567597c8b3593dc9b2961e04b?s=96&d=mm&r=g","caption":"Masahiko Sakakibara"},"url":"https:\/\/ionic.io\/blog\/author\/rdlabo"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/icons-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/70"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6172"}],"version-history":[{"count":4,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6172\/revisions"}],"predecessor-version":[{"id":6178,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6172\/revisions\/6178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6176"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}