Ionic 2에서 사용자 지정 아이콘 추가

Ionic 2에서 사용자 지정 아이콘 추가

---

내 앱 개발에 Ionic 2를 사용하고 있습니다. ionic 2 아이콘을 사용하는 것처럼 내 앱에서 사용자 지정 아이콘을 사용하고 싶습니다.꼬리표. 예 :

<ion-icon name="my-custom-icon"></ion-icon>

어떻게해야합니까? 이렇게하는 데 권장되는 방법이 있습니까?

---

ionic 2+에서 사용자 정의 글꼴을 사용하려면 다음과 같이 할 수 있습니다.

01 단계 :

• XD 와 같은 도구를 사용하여 사용자 정의 글꼴 SVG 파일을 보유하거나 만듭니다 .
• 멋진 온라인 도구 https://icomoon.io 로 이동 하여 SVG 파일에서 글꼴 아이콘을 생성하십시오. 그것은 무료 도구이며 매우 좋습니다. 잠시 동안 사용하고 있습니다.
• 사용자 정의 글꼴 파일을 다운로드하십시오.
• 파일은 아래와 같습니다.

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

위의 코드를 다음으로 바꿉니다.

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
  @extend .ion;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

2 단계 :

• 반복적 인 작업을 위해 SASS @mixing을 사용할 수 있습니다.

  @mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    content: $val;
    font-size: 26px;
  }
}

다음과 같이 sass 파일에서 sass 믹싱을 사용할 수 있습니다.

@include makeIcon(icon-new-home, '\e911')

03 단계

그것을 사용하십시오

<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
 </ion-tabs>

안드로이드 리플 효과도 지원합니다.

[업데이트] 2017 년 11 월 30 일

@ionic/app-scripts : 3.1.2
Ionic Framework    : ionic-angular 3.9.2

Ionic 3.1.2의 경우

아래 오류를 수정할 파일 @import "ionicons";내부 에 추가해야합니다./src/theme/variables.scss

"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional" 
        if the extend should be able to fail. 

---

이것은 https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/ 의 포럼에서 내가 찾은 가장 쉬운 방법입니다. 36 .

당신에 app.scss의 파일, 다음 코드를 추가합니다 :

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="appname-customicon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

그런 다음 템플릿에서 다음 HTML을 사용하여 아이콘을 만들 수 있습니다.

<ion-icon name="appname-customicon"></ion-icon>

이것은 글꼴 기반 방법을 사용하는 것보다 훨씬 덜 복잡합니다. 수백 개의 아이콘을 추가하지 않는 한이 방법은 괜찮습니다. 그러나 각 이미지는 별도의 요청으로 전송되며 글꼴 메소드와 마찬가지로 모든 이미지가 하나의 파일에 포함되므로 조금 더 효율적입니다.

---

현재 Ionic 3.3.0에서는 Anjum의 솔루션을 사용할 수 있지만 변경해야합니다.

@import "ionic.ionicons";

...에

@import "ionicons";

src / theme / variables.scss 파일에 있습니다.

이 솔루션은 다음 위치에서 찾았습니다.

https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

---

icomoon 의 아이콘 sass 시트를 사용하여 Anjum Nawab shaikh 답변 을 구현하려고했습니다 .

버전 2.2.2에서 작동하도록 만들 수있었습니다.

프로젝트 의 www / fonts 에서 icomoon 파일을 추가했습니다.

icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss

icomoon.scss에서 다음 scss를 추가했습니다.

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tclihz');
  src:  url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tclihz') format('truetype'),
    url('../fonts/icomoon.woff?tclihz') format('woff'),
    url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{

/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in 
www/assets/fonts/ionicons.scss */

  font-family: "Ionicons", "icomoon" !important; //So just add this
}

//Mixin
@mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    //important to overwrite ionic icons with your own icons
    content: $val !important; 
    font-size: 26px;
  }
}


//Adding Icons
@include makeIcon(email, '\e900');
...

그런 다음 변수를 가져 왔습니다.

@import "../www/fonts/icomoon";

이제 이것을 html 템플릿에 추가 할 수 있습니다.

<ion-icon name="email"></ion-icon>

---

시작하기 전에 필요한 모든 svg 파일이 있는지 확인하십시오.

이제 여기로 가십시오 : http://fontello.com/

That tool will generate your icon font and the CSS needed with. It is pretty intuitive, just use it, download, and copy your font wherever you want in your www folder but keep the same file structure. To finish, just integrate your CSS file in your index.html file and you're done!

I hope it will solve your issue! ;-)

---

According to ionic team:

Hey there! Right now it's limited to using ionicons, since underneath it's rendering an ion-icon, and thats handling the platform differences. You could open an issue and we could discuss adding this feature there

You can see all answers in here:

https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16

I also find this:

https://www.npmjs.com/package/ionic2-custom-icons ,

but do not seems a clever solution (I prefer to wait for a solution of Ionic team).

The best scenario for this is use old way, by creating a class on a scss file.

---

For add custom icons I use in my scss file:

.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
  @extend .ion;
}

.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
  content: 'your-custom-image';
}

Then in your HTML code:

<ion-icon name="MYICON"></ion-icon>

---

I think this step-by-step by GerritErpenstein is very intuitive, it works pretty good for me. My Ionic version is 2.2.2. Literally, you use a sentence like this and it's done:

<custom-icon set="star" name="iconostar"></custom-icon>

https://github.com/GerritErpenstein/ionic2-custom-icons

---

Create Icon
ion-icon {
        &[class*="custom-"] {
          mask-size: contain;
          mask-position: 50% 50%;
          mask-repeat: no-repeat;
          background: currentColor;
          width: 0.8em;
          height: 0.8em;
        }

        &[class*="custom-rupee"] {
          color: yellow;
          mask-image: url(../../assets/Images/rupee.svg);
        }
        &[class*="custom-ballon"] {
          mask-image: url(../../assets/ballon.svg);
        }
        &[class*="custom-mouse"] {
          mask-image: url(../../assets/mouse.svg);
        }

      }
 And to use them
&lt;ion-icon name="custom-rupee"></ion-icon>
&lt;ion-icon name="custom-mouse"></ion-icon>
&lt;ion-icon name="custom-ballon"></ion-icon>

---

If ionic way is not working for you, you can work with the angular way. Use this package: https://www.npmjs.com/package/angular-svg-icon.

Sample Code for ionic usage:

<svg-icon src="/assets/icons/activity.svg"></svg-icon>

ReferenceURL : https://stackoverflow.com/questions/38462885/add-custom-icon-in-ionic-2