ionic-team/ionicons

ionic 4 - prefix CDN domain before svg path of ionic components

Open

#1056 opened on Apr 2, 2019

View on GitHub
 (7 comments) (5 reactions) (0 assignees)TypeScript (17,256 stars) (2,083 forks)batch import
help wantedtype: bug

Description

I am serving my application's "index.html" file from a different domain and my ionic application is hosted on CDN domain.

Build Command ng build --prod --aot --build-optimizer --output-hashing none --deploy-url https://myappv1.mycdn.in/.

Here --deploy-url is my CDN domain.

Current behavior: When I am using <ion-back-button defaultHref="/"></ion-back-button> it's loading *.svg file dynamically. Whom path is related to "base-href" tag or hosted domain.

Expected behavior: I want to prefix CDN domain before all *.svg file which is dynamically generating by ionic components so *.svg path will not be pointed to the hosted domain.

Problem Statement Not getting the option to prefix CDN domain before *.svg file which is dynamically getting loaded by ionic components.

I am able to prefix the CDN domain before "assets" folder files but not able to do the same with ionic components related svg file. Because I don't know the entry point of the same.

Proposed/Expected solution All ionic components lazy loaded files should have prefixed --deploy-url path. For example if my --deploy-url https://myappv1.mycdn.in/ is while building my app. Svg file path of ionic components should be like https://myappv1.mycdn.in/svg/md-arrow-back.svg.

Ionic Info Ionic CLI: 4.10.3 Angular CLI: 7.3.3 Node: 10.15.1 Npm: 6.8.0 OS: darwin x64 (macOs Mojave, Version: 10.14.1)

Contributor guide

Tech stack
typescriptangular
Domain
frontendbuild system
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular CLI configurationIonic framework basicsCDN deployment concepts
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Investigate the ionicons source code (e.g., icon.ts) to understand how SVG path URLs are constructed. Look at Angular's deploy url option and how it affects asset loading. Check the issue comments for any proposed solutions or workarounds. Consider implementing a configuration option to allow users to set a custom CDN prefix for SVG icons.