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

Я использую Ionic 2 для разработки своего приложения. Я хочу использовать свои пользовательские значки в своем приложении, так как мы используем значки ionic 2, используя тег . Например:

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

Как я могу это достичь? Есть ли какой-либо рекомендуемый способ сделать это?

Ответы

Ответ 1

Если вы хотите использовать пользовательские шрифты в ионном 2, вы можете сделать это со следующим.

Шаг 01:

Имейте/создавайте собственные SVG файлы шрифтов, используя такие инструменты, как XD.
Перейдите в удивительный онлайн-инструмент 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;
}

Шаг 02:

Мы можем использовать 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>

и его равномерный эффект пульсации андроида, который выглядит здорово

[Обновлено] 30 ноября 2017 г.

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

Для Ионного 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.

Ответ 2

Это самый простой способ, который я нашел, с форумов 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>

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

Ответ 3

С текущим 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

Ответ 4

Перед запуском: убедитесь, что у вас есть каждый файл svg, который вам нужен.

Теперь просто перейдите сюда: http://fontello.com/

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

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

Ответ 5

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

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

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

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,

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

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

Ответ 6

Пытался внедрить 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');
...

Затем я сделал импорт переменных. scss

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

Теперь мы можем добавить это в шаблон html:

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

Ответ 7

Для добавления пользовательских значков я использую в своем файле 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>

Ответ 8

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

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

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