ionic framework - custom - Agregar icono personalizado en Ionic 2

ionic 3 add icon

Question

Estoy usando Ionic 2 para desarrollar mi aplicación. Quiero usar mis iconos personalizados en mi aplicación como si usáramos iconos iónicos 2 usando etiqueta. P.ej:

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

¿Cómo puedo conseguir esto? ¿Hay alguna forma recomendada de hacer esto?

Answer 1

Con el Ionic 3.3.0 actual puedes usar la solución de Anjum, pero tienes que cambiar

@import "ionic.ionicons";

a

@import "ionicons";

en el archivo src / theme / variables.scss.

Encontré esta solución en:

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

Answer 2

Creo que este paso a paso de GerritErpenstein es muy intuitivo, funciona bastante bien para mí. Mi versión iónica es 2.2.2. Literalmente, usas una oración como esta y se hace:

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

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

Answer 3

Esta es la forma más fácil que he encontrado, desde los foros en https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36

En su archivo app.scss , agregue el siguiente código:

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);
    }
}

Luego, en sus plantillas, puede usar el siguiente HTML para crear el icono:

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

Esto es mucho menos complicado que usar los métodos basados ​​en fuentes. Mientras no agregue cientos de iconos, debería estar de acuerdo con este método. Sin embargo, cada imagen se envía como una solicitud separada, donde al igual que con los métodos de fuente, todas las imágenes están contenidas en un archivo, por lo que sería un poco más eficiente.

Answer 4

Intenté implementar la answer Anjum Nawab shaikh en la parte superior con la hoja de iconos de icomoon.

He podido hacerlo funcionar con la versión 2.2.2.

En las fuentes www / fonts del proyecto, agregué los archivos icomoon:

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

En icomoon.scss agregué el siguiente 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'');
...

Luego hice una importación a las variables.scss

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

Ahora podemos agregar esto a la plantilla html:

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

Answer 5

Para agregar iconos personalizados que uso en mi archivo 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'';
}

Luego en su código HTML:

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

Answer 6

Según el equipo iónico:

¡Hola! En este momento se limita al uso de ionicones, ya que debajo está representando un icono de iones, y eso es manejar las diferencias de la plataforma. Podría abrir un problema y podríamos discutir agregar esta función allí

Puedes ver todas las respuestas aquí:

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

También encuentro esto:

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

pero no parece una solución inteligente (prefiero esperar una solución del equipo de Ionic).

El mejor escenario para esto es usar el método antiguo, creando una clase en un archivo scss.

Answer 7

Si desea utilizar fuentes personalizadas en ionic 2+, puede hacerlo con los siguientes.

Paso 01:

• Tener / crear archivos SVG de fuentes personalizadas utilizando herramientas como XD .
• Vaya a la increíble herramienta en línea https://icomoon.io para generar iconos de fuentes a partir de sus archivos SVG. Es una herramienta gratuita y muy buena, la estoy usando por un tiempo.
• Descargue su archivo de fuente personalizado.
• Su archivo se verá como algo debajo.

[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;
}

reemplace el código anterior con:

[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;
}

Paso 02:

• Podemos usar SASS @mixing para trabajo repetitivo

  @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;
  }
}

podemos usar nuestra mezcla sass en nuestro archivo sass como:

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

Paso 03

Úselo como

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

e incluso admite el efecto dominó de Android, que se ve genial

[Actualizado] 30 nov 2017

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

Para Ionic 3.1.2

Necesita agregar @import "ionicons"; dentro de su archivo /src/theme/variables.scss que solucionará el siguiente error

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

Answer 8

Si la forma iónica no funciona para usted, puede trabajar con la forma angular. Use este paquete: https://www.npmjs.com/package/angular-svg-icon .

Código de muestra para uso iónico:

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

Answer 9

Antes de comenzar : asegúrese de tener todos los archivos svg que necesita.

Ahora solo ve aquí: http://fontello.com/

Esa herramienta generará la fuente de su icono y el CSS necesario con. Es bastante intuitivo, solo utilícelo, descargue y copie su fuente donde quiera en su carpeta www pero mantenga la misma estructura de archivos . Para finalizar, solo integre su archivo CSS en su archivo index.html y listo.

¡Espero que resuelva tu problema! ;-)

Answer 10

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>