From 318e9409c5ff0e70327f038244928e274a9eb798 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Tue, 16 Apr 2024 14:03:37 +0100 Subject: [PATCH 1/2] fix(docs): add a section on custom svg paths --- readme.md | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index d33beca69..1eb428930 100644 --- a/readme.md +++ b/readme.md @@ -19,11 +19,11 @@ label. The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need. -Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource. +Also note that only visible icons are loaded, and icons that are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource. ### Installation -If you're using [Ionic Framework](https://ionicframework.com/), Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following ` @@ -46,8 +46,26 @@ To use a custom SVG, provide its url in the `src` attribute to request the exter ``` +### Custom Asset Path + +If you have a different set of icons you like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via: + +```ts +import { setAssetPath } from '@stencil/core' + +// set root path for loading icons to "/public/svg" +setAssetPath(`${window.location.origin}/public/svg/`); +``` + +This allows the use of named icons like this: + +```html + + +``` + ## Variants -Each app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants. +Each app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outlines or sharp variants. ```html @@ -56,7 +74,7 @@ Each app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These d ``` ### Platform specificity -When using icons in Ionic Framework you can specify different icons per platform. Use the `md` and `ios` attributes and provide the platform specific icon/variant name. +When using icons in Ionic Framework you can specify different icons per platform. Use the `md` and `ios` attributes and provide the platform-specific icon/variant name. ```html From 1918a16148ee6e747ab1a97259d9dffb5a0a6360 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Wed, 17 Apr 2024 17:57:17 -0700 Subject: [PATCH 2/2] PR feedback --- readme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 1eb428930..118667bd8 100644 --- a/readme.md +++ b/readme.md @@ -46,9 +46,9 @@ To use a custom SVG, provide its url in the `src` attribute to request the exter ``` -### Custom Asset Path +#### Custom Asset Path -If you have a different set of icons you like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via: +If you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via: ```ts import { setAssetPath } from '@stencil/core' @@ -65,7 +65,7 @@ This allows the use of named icons like this: ``` ## Variants -Each app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outlines or sharp variants. +Each app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants. ```html