mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-12 14:24:34 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
---
|
|
sidebarDepth: 3
|
|
---
|
|
|
|
# Icono Svg
|
|
|
|
Componente global de icono: Icono Svg.
|
|
|
|
Por defecto, el componente Icono Svg está registrado en [@/icons](https://github.com/adempiere/adempiere-vue/blob/master/src/icons/index.js#L6), y puede usarse en cualquier parte del proyecto. Todos los iconos se pueden encontrar en [@/icons/svg](https://github.com/adempiere/adempiere-vue/tree/master/src/icons/svg). Puedes agregar o eliminar el icono por ti mismo, y el icono se importará automáticamente sin operación manual.
|
|
|
|
## Uso
|
|
|
|
```html
|
|
<!-- usa icon-class para configurar el nombre; usa `class-name` para personalizar la clase -->
|
|
<svg-icon icon-class="password" class-name='custom-class' />
|
|
```
|
|
|
|
## Cambiar color
|
|
|
|
Por defecto, `svg-icon` lee su color primario `fill: currentColor;`
|
|
|
|
Puedes cambiar el `color` del padre o directamente el color de relleno `fill`.
|
|
|
|
## Importar desde url <Badge text="v4.2.0+"/>
|
|
|
|
Soporte de importación `svg` desde url externa. P.ej:
|
|
|
|
`<svg-icon icon-class="https://xxxx.svg />`
|
|
|
|
## Tamaño
|
|
|
|
Si estás descargando un icono de [iconfont](https://www.iconfont.cn/), recuerda usar una herramienta como Sketch para especificar el tamaño del icono. De lo contrario, el tamaño de los iconos en el proyecto puede no ser uniforme.
|
|
|
|
Todos los iconos utilizados en este proyecto tienen especificaciones de tamaño 128\*128.
|
|
|
|
:::tip
|
|
Si encuentras el color incorrecto del icono, puedes consultar el [issue](https://github.com/adempiere/adempiere-vue/issues/330) para modificarlo
|
|
:::
|