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

Question

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

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

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

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

57

ionic-framework ionic2

Источник

user3326169 19 июл '16 в 15:34

11 ответов

Решение

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

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

70

Источник

user272011 15 июн '17 в 19:02

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

9

Источник

user2513232 09 июн '17 в 09:43

Попытка реализовать ответ Анжума Наваб-шейха сверху с помощью иконки sass sheet от icomoon.

Я смог заставить его работать с версией 2.2.2.

В www/ шрифты проекта я добавил файлы 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>

6

Источник

user3859456 24 апр '17 в 06:33

По мнению ионной команды:

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

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

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.

4

Источник

user3767655 31 авг '16 в 14:08

Перед началом: убедитесь, что у вас есть все необходимые SVG-файлы.

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

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

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

4

Источник

user2196157 11 авг '16 в 08:03

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

3

Источник

user2172151 28 ноя '16 в 21:30

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

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

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

1

Источник

user5508087 04 апр '17 в 08:46

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>

0

Источник

user7618720 08 авг '18 в 18:42

Если ионный путь не работает для вас, вы можете работать с угловым путем. Используйте этот пакет: https://www.npmjs.com/package/angular-svg-icon.

Пример кода для ионного использования:

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

0

Источник

user10149313 26 окт '18 в 16:30

Ниже приведен рекомендуемый способ отображения внешних значков svg с помощью ion-icon:

Чтобы использовать настраиваемый SVG, укажите его URL-адрес в атрибуте src для запроса внешнего файла SVG. Атрибут src работает так же, как в том случае, если URL-адрес должен быть доступен с веб-страницы, которая запрашивает изображение. Кроме того, внешний файл может быть только допустимым svg и не допускает сценариев или событий в элементе svg.

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

Ссылка: https://ionic.io/ionicons/usage

0

Источник

user3326169 29 июн '21 в 09:31

Другие вопросы по тегам ionic-framework ionic2

user254662 04 дек '16 в 13:30 2016-12-04 13:30 · Accepted Answer · 2016-12-04 13:30

Если вы хотите использовать пользовательские шрифты в ionic 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>

и его даже поддержка волнового эффекта Android, который выглядит круто

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

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