Aska

Vue3 fontawesomeとアニメーション

vue-fontawesome

fontawesomeを使ってアイコンフォントを使えるようにする

vue-fontawesome インストール

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/vue-fontawesome@prerelease

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

vue-fontawesome の登録

resources\js\app.js を編集

   /**
    * fontawesome
    * https://github.com/FortAwesome/vue-fontawesome
    * http://l-lin.github.io/font-awesome-animation/
    */
   // コアのインポート
   import {
       library
   } from "@fortawesome/fontawesome-svg-core";

   // 無料で使えるフォントをインポート
   import {
       fab
   } from "@fortawesome/free-brands-svg-icons";
   import {
       far
   } from "@fortawesome/free-regular-svg-icons";
   import {
       fas
   } from "@fortawesome/free-solid-svg-icons";
   // コンポネントをインポート
   import {
       FontAwesomeIcon,
       FontAwesomeLayers,
       FontAwesomeLayersText
   } from "@fortawesome/vue-fontawesome";
   // ライブラリに追加
   library.add(fas, far, fab);

   const funcApp = async () => {

    return createApp(App)
        .use(router)
        // どこでもインポートしないで使えるようにグローバルとして登録
        // 名前は自由にきめてOK
        .component("FAIcon", FontAwesomeIcon)
        .component('FALayers', FontAwesomeLayers)
        .component('FAText', FontAwesomeLayersText)
        // appエレメントにマウント
        .mount('#app')
}

vue-fontawesome 使用方法

    <!-- アイコンの指定 -->
    <FAIcon icon="coffee" />
    <FAIcon :icon="['fas', 'coffee']" />

    <!-- サイズ -->
    <!--  xs, sm, lg, 2x, 3x ... 10x  -->
    <FAIcon :icon="['fas', 'coffee']" size="xs" />
    <FAIcon :icon="['fas', 'coffee']" size="6x" />

    <!-- 等幅フォント -->
    <FAIcon :icon="['fas', 'coffee']" fixed-width />

    <!-- 回転 -->
    <FAIcon :icon="['fas', 'coffee']" rotation="90" />

    <!-- フリップ -->
    <FAIcon :icon="['fas', 'coffee']" flip="horizontal" />
    <FAIcon :icon="['fas', 'coffee']" flip="vertical" />
    <FAIcon :icon="['fas', 'coffee']" flip="both" />

    <!-- アニメーション -->
    <FAIcon icon="spinner" spin />
    <FAIcon icon="spinner" pulse />

    <!-- 枠線 -->
    <FAIcon :icon="['fas', 'coffee']" border />

    <!-- プル -->
    <FAIcon :icon="['fas', 'coffee']" pull="left" />
    <FAIcon :icon="['fas', 'coffee']" pull="right" />

    <!-- 色の反転 -->
    <FAIcon :icon="['fas', 'coffee']" inverse :style="{'background-color': 'black'}" />

    <!-- トランスフォーム Scaling -->
    <FAIcon :icon="['fas', 'coffee']" transform="shrink-8" />
    <FAIcon :icon="['fas', 'coffee']" />
    <FAIcon :icon="['fas', 'coffee']" transform="grow-8" />

    <!-- トランスフォーム Positioning -->
    <FAIcon :icon="['fas', 'coffee']" transform="shrink-8" :style="{'background-color': 'rgb(0 0 0 / 25%)'}" />
    <FAIcon :icon="['fas', 'coffee']" transform="shrink-8 up-3 left-3" :style="{'background-color': 'rgb(0 0 0 / 25%)'}" />
    <FAIcon :icon="['fas', 'coffee']" transform="shrink-8 down-3 right-3" :style="{'background-color': 'rgb(0 0 0 / 25%)'}" />

    <!-- トランスフォーム Positioning Flipping -->
    <FAIcon :icon="['fas', 'coffee']" transform="rotate-90" />
    <FAIcon :icon="['fas', 'coffee']" transform="rotate-180" />
    <FAIcon :icon="['fas', 'coffee']" :transform="{rotate: '270'}" />

    <!-- トランスフォーム Positioning Flipping -->
    <FAIcon :icon="['fas', 'coffee']" transform="flip-v" />
    <FAIcon :icon="['fas', 'coffee']" transform="flip-h" />
    <FAIcon :icon="['fas', 'coffee']" transform="flip-v flip-h" />

    <!-- マスキング -->
    <FAIcon :icon="['fas', 'coffee']" :mask="['fas', 'circle']" transform="shrink-8" size="2x" />

    <!-- レイヤリング -->
    <FALayers class="fa-2x">
        <FAIcon :icon="['fas', 'circle']" />
        <FAIcon :icon="['fas', 'times']" transform="shrink-3" inverse />
    </FALayers>

    <FALayers class="fa-2x">
        <FAIcon :icon="['fas', 'play']" transform="rotate--90 grow-2" />
        <FAIcon :icon="['fas', 'sun']" inverse transform="shrink-10 up-2" />
        <FAIcon :icon="['fas', 'moon']" inverse transform="shrink-11 down-4.2 left-4" />
        <FAIcon :icon="['fas', 'star']" inverse transform="shrink-11 down-4.2 right-3" />
    </FALayers>

    <FALayers class="fa-2x">
        <FAIcon icon="calendar"/>
        <FAText class="fa-inverse" transform="shrink-8 down-3.5" :value="30" />
    </FALayers>

    <FALayers class="fa-2x">
        <FAIcon icon="certificate"/>
        <FAText transform="shrink-11.5 rotate--30" value="NEW" :style="{'color': 'white'}" />
    </FALayers>

    <FALayers class="fa-4x">
        <FAIcon icon="envelope"/>
        <FAText counter value="21" />
    </FALayers>
    <FALayers class="fa-4x">
        <FAIcon icon="envelope"/>
        <FAText counter value="22" position="bottom-left" style="background:Tomato" />
    </FALayers>

アニメーションライブラリ

アニメーションライブラリfont-awesome-animationでかんたんな動きをつけれるようにする

アニメーションライブラリ インストール

    npm i font-awesome-animation

アニメーションライブラリ 登録

このライブラリはCSSのみなのでスタイルを追加する

server\webpack.mix.js

    const mix = require('laravel-mix');

        mix.js("resources/js/app.js", "public/js")
        .styles([
            'resources/css/sanitize.css',
            // ここに追加
            'node_modules/font-awesome-animation/css/font-awesome-animation.min.css',
        ], 'public/css/all.css');

アニメーションライブラリ 使用例

モーション

• faa-wrench
• faa-ring
• faa-horizontal
• faa-vertical
• faa-flash
• faa-bounce
• faa-spin
• faa-float
• faa-pulse
• faa-shake
• faa-tada
• faa-passing
• faa-passing
• faa-burst
• faa-falling
• faa-rising

モード

• animated
• animated-hover

スピード

• faa-fast
• faa-slow

親要素でホバー

• faa-parent

    <!-- 基本 -->
    <FAIcon icon="coffee" class="faa-wrench animated" />

    <!-- 速度 -->
    <FAIcon icon="coffee" class="faa-wrench animated faa-slow" />
    <FAIcon icon="coffee" class="faa-wrench animated faa-fast" />

    <!-- ホバー -->
    <FAIcon icon="coffee" class="faa-wrench animated-hover" />

    <!-- 親要素でホバー -->
    <div class="faa-parent animated-hover">
        <FAIcon icon="coffee" class="faa-wrench" />coffee
    </div>