Я использую Ionic 2 для разработки своего приложения. Я хочу использовать свои пользовательские значки в своем приложении, так как мы используем значки ionic 2, используя тег . Например:
<ion-icon name="my-custom-icon"></ion-icon>
Как я могу это достичь? Есть ли какой-либо рекомендуемый способ сделать это?
Если вы хотите использовать пользовательские шрифты в ионном 2, вы можете сделать это со следующим.
Шаг 01:
[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:
@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>
и его равномерный эффект пульсации андроида, который выглядит здорово
@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.
Это самый простой способ, который я нашел, с форумов 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
Перед запуском: убедитесь, что у вас есть каждый файл svg, который вам нужен.
Теперь просто перейдите сюда: http://fontello.com/
Этот инструмент будет генерировать шрифт значка и необходимый CSS. Это довольно интуитивно понятно, просто используйте его, загрузите и скопируйте шрифт там, где вы хотите, в свою www-папку, но сохраните ту же структуру файла. Чтобы закончить, просто интегрируйте свой файл CSS в свой index.html файл, и все готово!
Я надеюсь, что это решит вашу проблему!; -)
Согласно ионной команде:
Эй, там! В настоящее время он ограничивается использованием ионников, поскольку под ним создается иконка-икона, и это касается обработки различий в платформе. Вы можете открыть проблему, и мы могли бы обсудить добавление этой функции там
Здесь вы можете увидеть все ответы:
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.
Пытался внедрить 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>
Для добавления пользовательских значков я использую в своем файле 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>