0

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Enrique GF
  • 1,215
  • 3
  • 16
  • 35
  • 1st. why are you using bootstrap in ionic project? 2nd: you can simply use `img` tag to display your custom svg Icons. – Najam Us Saqib Oct 28 '20 at 11:04
  • in order to add to an ion-icon tag a src toward a file i have to set bootstrap – Enrique GF Oct 28 '20 at 11:11
  • 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. `` and simply use css for width height. – Najam Us Saqib Oct 28 '20 at 11:29
  • 1
    Ok Najam im following your request. Thanks for your support . If you feel like you could formally answer my issue and then i would rate you – Enrique GF Oct 28 '20 at 11:33

1 Answers1

1

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.

Najam Us Saqib
  • 3,190
  • 1
  • 24
  • 43
  • 1
    @Junaid you can clearly see inclusion of `bootstrap.min.css` in OP's `angular.json` file. so it was a fair assumption that Op's is trying to use bootstrap framework in project. – Najam Us Saqib Jun 01 '23 at 12:45
  • A side note, bootstrap or bootstrapping are widely used technical/computing terms which "usually refers to a self-starting process that is supposed to continue or grow without external input" Please note that it's not the same as the Bootstrap CSS framework. Just like Java has nothing to do with JavaScript, the term Bootstrap has nothing to do with the CSS framework also called Bootstrap. Refer to this SO thread for more info: https://stackoverflow.com/q/1254542/4109794 – Junaid Jun 01 '23 at 15:05