Добавить пользовательский значок в Ionic 2

Это самый простой способ, который я нашел, с форумов по адресу https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.

в своем приложение.СКС файл, добавьте следующий код:

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>

это гораздо менее сложно, чем использование методов на основе шрифтов. Пока вы не добавляете сотни значки вы должны быть в порядке с этим методом. Однако каждое изображение отправляется как отдельный запрос, где, как и в методах шрифта, все изображения содержатся в одном файле, поэтому это было бы немного более эффективно.

с текущим ионным 3.3.0 вы можете использовать решение от Anjum, но вы должны изменить

@import "ionic.ionicons";

до

@import "ionicons";

в src / theme / variables.SCSS файл.

нашел это решение на:

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

пытался реализовать Anjum Nawab shaikh ответ сверху с пиктограммами Sass sheet от icomoon.

я смог заставить его работать с версией 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/

этот инструмент будет генерировать ваш значок шрифта и CSS, необходимые С. Это довольно интуитивно, просто использовать его, скачать, и скопировать шрифт в папку www, но сохранить ту же структуру файла. Чтобы закончить, просто интегрируйте свой CSS-файл в свой index.html файл и все готово!

I надеюсь, что это решит вашу проблему! ; -)

согласно ионной команде:

Привет! Прямо сейчас он ограничен использованием иониконов, так как под ним отображается значок Иона, и это обрабатывает различия в платформе. Вы можете открыть проблему, и мы могли бы обсудить добавление этой функции там

вы можете увидеть все ответы здесь:

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

Я также найти это:

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

но не кажется умным решением (я предпочитаю ждать решения ионной команды).

лучший сценарий для этого-использовать старый способ, создав класс в файле scss.

для добавления пользовательских значков, которые я использую в моем файле scss:

.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';
}

тогда в вашем HTML коде:

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

Я думаю, что это шаг за шагом по GerritErpenstein очень интуитивно, это работает довольно хорошо для меня. Моя ионная версия 2.2.2. Буквально, вы используете такое предложение, и это делается:

<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>