I am trying to save space coding and I have 8 images that are derived from html markup
(i.e: <svg></svg>)
I can use *ngIf based on my value I am correlating each of these images with but this solution seems inefficient. I can't seem to find another solution online. Ideally I would like to save these html expressions in variables in a service, call the service, and inject the html expression into my html file.
Any ideas?
EDIT: You can actually just create an icon file (i.e. https://icoconvert.com/)and avoid the lengthy code.
If your goal is simply to save space in your component's html file, one solution is to use the Angular Material mat-icon component, which supports SVGs. This would allow you to inject a specific SVG into a component by simply adding mat-icon with the appropriate svgIcon input variable (e.g. <mat-icon svgIcon="left-arrow">) as well as change the displayed SVG icon by simply updating the svgIcon input variable.
edit: angular 8 also supports using a .svg file as a component's template
Another option would be for you to create a new component for each SVG.
e.g.
import { Component } from '#angular/core';
#Component({
selector: 'app-custom-svg',
template: `
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 224 224" style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,224v-224h224v224z" fill="none"></path><g id="Layer_1"><g><g fill="#ff5576"><g><g><path d="M145.425,109.375l34.3,-17.15c-9.275,-40.25 -46.55,-70 -90.3,-67.55c-43.75,2.45 -79.275,37.625 -82.25,81.2c-1.4,21.35 4.725,41.125 16.1,57.05c3.85,5.425 10.15,8.575 16.975,8.575h85.75v-30.8c0,-13.3 7.525,-25.375 19.425,-31.325z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="13" cy="48" transform="scale(1.75,1.75)" r="3"></circle></g></g></g><g fill="#ff5576"><g><g><path d="M121.45,123.2c-0.875,0 -1.75,-0.175 -2.625,-0.7c-2.45,-1.4 -3.325,-4.725 -1.925,-7.175c4.9,-8.575 12.25,-15.575 21.35,-20.125l36.05,-17.675c2.625,-1.225 5.775,-0.175 7,2.45c1.225,2.625 0.175,5.775 -2.45,7l-35.875,17.675c-7.175,3.5 -12.95,9.1 -16.8,15.925c-1.05,1.575 -2.8,2.625 -4.725,2.625z"></path></g></g></g><g fill="#ffffff"><g><g><circle cx="54" cy="98" transform="scale(1.75,1.75)" r="18"></circle></g></g></g><g fill="#ffffff"><g><g><path d="M32.9,71.05c-1.05,0 -2.275,-0.35 -3.15,-1.05c-2.275,-1.75 -2.8,-5.075 -1.05,-7.35c14.525,-19.425 36.925,-31.5 61.075,-32.725c2.8,-0.175 5.425,2.1 5.6,4.9c0.175,2.975 -2.1,5.425 -4.9,5.6c-21.175,1.225 -40.6,11.55 -53.375,28.7c-1.05,1.225 -2.625,1.925 -4.2,1.925z"></path></g></g></g><path d="M149.975,106.925c-1.225,-2.625 -4.375,-3.675 -7,-2.275c-13.65,6.825 -22.225,20.65 -22.225,36.05v5.25c-6.65,-6.825 -15.925,-11.025 -26.25,-11.025c-10.85,0 -21,4.725 -28,12.95c-1.925,2.275 -1.575,5.6 0.525,7.35c1.05,0.875 2.275,1.225 3.325,1.225c1.4,0 2.975,-0.7 4.025,-1.925c5.075,-5.95 12.25,-9.275 19.95,-9.275c14.525,0 26.25,11.725 26.25,26.25c0,2.975 2.275,5.25 5.25,5.25c2.975,0 5.25,-2.275 5.25,-5.25c0,-1.75 0,-30.8 0,-30.8c0,-11.375 6.3,-21.525 16.45,-26.6c2.8,-1.4 3.85,-4.55 2.45,-7.175z" fill="#ff5576"></path><path d="M213.5,144.025c-2.275,-1.575 -5.075,-2.275 -7.7,-2.275v0c-9.275,0 -22.75,0 -34.825,0l-25.55,-26.425c0.7,-0.525 1.575,-0.875 2.275,-1.4l34.3,-17.15c2.1,-1.05 3.325,-3.5 2.8,-5.95c-10.15,-43.925 -50.4,-74.025 -95.725,-71.4c-46.55,2.625 -84,39.725 -87.15,86.1c-1.4,21.875 4.375,42.7 17.15,60.375c4.9,6.65 12.6,10.675 21,10.85c2.625,0 4.9,-1.75 5.425,-4.375c0.525,-3.325 -1.925,-6.125 -5.25,-6.125c-5.075,0 -9.8,-2.45 -12.6,-6.475c-11.2,-15.575 -16.45,-34.125 -15.225,-53.55c2.8,-41.3 36.05,-74.025 77.35,-76.475c38.675,-2.1 73.325,22.575 83.825,59.5l-30.625,15.225c-10.85,5.425 -18.55,15.225 -21.175,27.125c-0.7,2.8 0.875,5.775 3.675,6.475c2.975,0.7 5.775,-1.05 6.475,-4.025c1.05,-4.375 2.975,-8.575 5.6,-12.075l18.9,19.775c-2.975,0 -5.6,0 -7.7,0c-2.975,0 -5.25,2.275 -5.25,5.25c0,2.975 2.275,5.25 5.25,5.25c4.2,0 10.675,0 17.85,0l13.65,14h-85.575c-2.625,0 -4.9,1.75 -5.425,4.2c-0.7,3.325 1.925,6.3 5.075,6.3h25.725c-2.45,11.9 -13.125,21 -25.725,21c-14.525,0 -26.25,-11.725 -26.25,-26.25c0,-2.975 -2.275,-5.25 -5.25,-5.25c-2.975,0 -5.25,2.275 -5.25,5.25c0,20.3 16.45,36.75 36.75,36.75c18.55,0 33.775,-13.65 36.4,-31.5h24.85l-3.5,13.3c-1.05,4.2 -0.525,8.75 1.925,12.25c2.625,3.675 6.825,5.95 11.375,5.95h37.625c2.45,0 4.55,-1.575 5.075,-4.025l11.2,-45.15c1.575,-5.6 -0.7,-11.55 -5.775,-15.05zM209.125,156.625l-10.325,41.125h-33.425c-1.575,0 -2.45,-0.875 -2.8,-1.4c-0.35,-0.525 -1.05,-1.575 -0.525,-2.975l4.375,-16.625h25.375c0.175,0 0.175,0 0.35,0c0.175,0 0.175,0 0.35,0c1.4,0 2.625,-0.525 3.675,-1.4c2.1,-2.1 2.1,-5.425 0.175,-7.35l-15.05,-15.575c8.925,0 17.85,0 24.675,0v0c1.4,0 2.275,0.875 2.8,1.4c0.175,0.175 0.7,1.225 0.35,2.8z" fill="#444b54"></path></g></g></g></svg>
`,
})
export class AnSVGComponent {}
Then you can use these SVG's by simply calling the appropriate custom component.
e.g.
<app-custom-svg></app-custom-svg>
I've got some SVG icons, which I use in my web app. They all have specific colors. Regardless of the color, all SVG icons have one color, instead of one, which has two colors (gray and red).
I have an angular component to set my icons in my web app. The directive of my component looks like this:
import {constants} from '../../../index.constants';
export class MyIcon{
public icon: string;
public iconsPath: string = constants.PATH_TO_ICONS;
public fileExtension: string = '.svg';
static options: ng.IComponentOptions = {
template: '<div ng-include="ctrl.iconsPath + ctrl.icon + ctrl.fileExtension"></div>',
controllerAs: 'ctrl',
controller: MyIcon,
bindings: {
icon: '#'
}
};
}
I can use my component in my code and with a binding named icon, I can set the name of the icon I'd like to use:
<my-icon icon="pencil"></my-icon>
In the attachment you can find the icon with the two colors. When I use this in my component, the colors of all other icons turn to red and their shape changes.
When I remove the faulty icon, all other icons have their specific color and look like they have to look. I have no idea why this happens, perhaps because the faulty icon has two colors?
I noticed, that the red of the faulty icon is the same like the red from all other icons, when they change their color.
Example: Icons from my navigation with their specific colors and without the faulty icon in my code:
Example with error: The icons in my navigation and all other icons in my web app look like this (red and ugly shape), when I use the faulty icon in my code:
FAULTY SVG ICON:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>.cls-1,.cls-4{fill:none;stroke-miterlimit:10;}.cls-1{stroke:#e30613;stroke-width:2px;}.cls-2{fill:#fff;}.cls-3{fill:#8b8c8d;}.cls-4{stroke:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>
OTHER SVG:
<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>#iArrowIcon .cls-1{fill:none;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="<Compound Path>" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>
Any ideas?
Your svg's have same class and the svg that is causing problem is overriding css properties defined in other svgs.
What you can do is, add a parent class or id to the faulty icon, and use it to separate it's css from others.
Something like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SVG ICONS</title>
</head>
<body>
<svg id="iStopIcon" class="iStopIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.62 15.62"><defs><style>
#iStopIcon .cls-1,#iStopIcon .cls-4{fill:none;stroke-miterlimit:10}#iStopIcon .cls-1{stroke:#e30613;stroke-width:2px}.cls-2{fill:#fff}.cls-3{fill:#8b8c8d}.cls-4{stroke:#fff}
</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="7.5" cy="8.12" r="6.5"/><polygon class="cls-2" points="1.9 10.19 11.38 0.71 14.91 4.24 5.43 13.72 0.72 14.9 1.9 10.19"/><path class="cls-3" d="M11.38,1.41l2.83,2.83-9,9-3.77.94.94-3.77,9-9m0-1.41L1.45,9.93,0,15.59l5.66-1.41,9.93-9.93L11.38,0Z"/><polygon class="cls-3" points="0.03 15.59 3.43 14.74 0.88 12.19 0.03 15.59"/><rect class="cls-3" x="1.51" y="4.09" width="14.04" height="6" transform="translate(-2.51 8.11) rotate(-45)"/><line class="cls-4" x1="9.96" y1="1.41" x2="14.21" y2="5.66"/><line class="cls-1" x1="2.9" y1="3.52" x2="12.1" y2="12.72"/></g></g></svg>
<svg id="iArrowIcon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7.06 12.71"><defs><style>
#iArrowIcon .cls-1, .cls-4{fill:#ccc;stroke-miterlimit:10;fill-rule:evenodd;}</style></defs><title>arrow</title><path id="_Compound_Path_" data-name="<Compound Path>" class="cls-1" d="M4904.11,1058.78l6,6-6,6" transform="translate(-4903.76 -1058.42)"/></svg>
</body>
</html>
Here I am using Id, you can use class instead if you prefer.
Your svg use their own style and take the same class.
When you load the last icon, css of this icon rewrite rule of color for other on the class .cls-1
Try to modify your svg with other class or fill the 1 color svg via css like this :
.myIcon{
fill: grey;
}