Issue
I'm trying to change the size of one of the svg images (customized after transform a jpg to svg) in my IONIC project to a bigger size.
Thus literally I add in my Angular .json all referent to bootstrap
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "node_modules/bootstrap/dist/css/bootstrap.min.css"/HERE
}
],
Done this I would be able to add image (svg) on my ion-icon tags in a conventional way through the src to my located file
<ion-icon class='big' src='../../../assets/home.svg' ></ion-icon>
Then as the images was too small, I did try to use several ways of changing its size but that doesn't work.
I'm using SCSS thus in my app.scss
I set this
ion-icon {
&.big {
width: 350px;
height: 350px;
}
}
then I did add the class on my html as I exposed before
<ion-icon class='big' src='../../../assets/home.svg' ></ion-icon>
I could use size=large ,but that would be conditioned to an specific measure but the svg images doesn't modify its size.....
Any help about how improve this problem?
If is there any other way of making this to happen would also be great any hint!! Thanks
By the way the IONIC version I'm using is 6.12.0
Solution
Don't use Bootstrap it will conflict with ionic's default css and your UI might get messed up.
Use img tag to show your SVG.
<img src="assets/svgicons/youricon.svg" />
and apply css for width and height.
Answered By - Najam Us Saqib
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.