Блог

Главная - Вопросы по программированию - Vue unicons — установка окна просмотра в пользовательском значке

Vue unicons — установка окна просмотра в пользовательском значке

#javascript #vue.js #vuejs2

#javascript #vue.js #vuejs2

Вопрос:

Я только что установил модуль Vue Unicons в свой проект vue.

Vue version: 2.6.10
Vue unicons version: 3.3.1

Я пытаюсь создать свои собственные пользовательские значки, как описано здесь:

custom-icons.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>';
}

app.js:

 import Unicon from 'vue-unicons/dist/vue-unicons-vue2.umd';
import { myTestIcon } from './custom-icons';
Unicon.add([myTestIcon]);

App.vue:

 <unicon name="my-test-icon"></unicon>

Хотя я установил viewBox определение значка, значок отображается со значением viewBox ( 0 0 24 24 ) по умолчанию.

Если я добавлю viewBox="0 0 650 650" или даже v-bind="{viewBox:'0 0 650 650'}" к <unicon> элементу, он будет работать нормально. Но я не могу этого сделать, так как я использую значки динамически.

Я прочитал в этом месте, что это может произойти из-за компиляции, но ответ мне не помог.

Есть идеи, как я могу этого добиться?

Ответ №1:

Схема определения пользовательского значка не включает viewBox свойство, поэтому его установка в вашем определении не имеет никакого эффекта. В частности, Vue Unicons считывает name только , style , и path из определения пользовательского значка.

viewBox Может быть установлен только в качестве опоры для <unicon> компонента:

 <unicon name="my-custom-icon"
        viewBox="0 0 32 32" 👈
        width="64"
        height="64" />

ДЕМОНСТРАЦИЯ

Метки: