Acabo de instalar el módulo Vue Unicons en mi proyecto vue.
Versión Vue: 2.6.10
Vue unicons versión: 3.3.1
Estoy tratando de crear mis propios íconos personalizados como se explica aquí :
iconos-personalizados.js:
export const myTestIcon = { name: 'myTestIcon', style: 'line', viewBox: '0 0 680 680', path: '<path d="M 635 497 l 1 -466 l -620 0 L 20 640 L 516 643 L 231 221z"></path>'; }aplicación.js:
import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd'; import { myTestIcon } from './custom-icons'; Unicon.add([myTestIcon]);Aplicación.vue:
<unicon name="my-test-icon"></unicon> Aunque configuré viewBox la definición del ícono, el ícono se representa con el valor predeterminado de viewBox ( 0 0 24 24 ).
Si agrego viewBox="0 0 650 650" o incluso v-bind="{viewBox:'0 0 650 650'}" al elemento <unicon> , funciona bien. Pero no puedo hacerlo ya que uso iconos dinámicamente.
Leí en este lugar que podría suceder debido a la compilación, pero la respuesta no me ayudó.
¿Alguna idea de cómo puedo lograrlo?
El esquema de definición de icono personalizado no incluye una propiedad viewBox , por lo que configurarlo en su definición no tiene ningún efecto. Específicamente, Vue Unicons solo lee el name , el style y la path de la definición del icono personalizado.
El viewBox solo se puede configurar como accesorio en el componente <unicon> :
<unicon name="my-custom-icon" viewBox="0 0 32 32" 👈 width="64" height="64" />