UI-набор компонентов Готово

Установка

Добавьте в package.json зависимости и выполните команду npm install

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "7.2.0",
    "@fortawesome/free-brands-svg-icons": "7.2.0",
    "@fortawesome/free-regular-svg-icons": "7.2.0",
    "@fortawesome/free-solid-svg-icons": "7.2.0",
    "@fortawesome/vue-fontawesome": "3.1.3",
    "gotovo-ui": "^2026.4",
  }
}

Добавьте в vite.config.js псевдоним

export default defineConfig({
    resolve: {
        alias: {
            '~gotovo': resolve(import.meta.dirname, 'node_modules/gotovo-ui'),
        }
    },
}

Добавьте в ваш основной scss-файл

@import "gotovo-ui/scss/gotovo-ui";

Для иконок создайте файл fontAwesome.js следующего примерного содержания (в данном случае импортируются только 3-х иконки, каждая из своего отдельного набора)

import { library } from '@fortawesome/fontawesome-svg-core'
import {
    faAddressCard,
} from '@fortawesome/free-solid-svg-icons'
import {
    faCircle as faCircleR,
} from '@fortawesome/free-regular-svg-icons'
import {
    faTelegram,
} from '@fortawesome/free-brands-svg-icons'

library.add({
    faAddressCard,
    faCircleR,
    faTelegram,
})

В основном Vue-файле (app.js) добавьте

import '~/components/ui/fontAwesome'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

const app = createApp(App)
app.component(FontAwesomeIcon.name, FontAwesomeIcon)

Использование

Vue-компонент

<template>
    <i-button 
        look="primary" 
        icon="telegram"
        @click="onClick"
    >
        Кнопка
    </i-button>
</template>

<script>
    import { IButton } from '~gotovo'
    
    export default {
        components: {
            IButton,
        },
        
        methods: {
            onClick(e) {
                
            }
        }
    }
</script>