お問い合わせ

ブログ

これまでに経験してきたプロジェクトで気になる技術の情報を紹介していきます。

Vue3 fontawesomeとアニメーション

okuda Okuda 1 week

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>
Vue3 fontawesomeとアニメーション 2021-11-30 19:13:18

コメントはありません。

4691

お気軽に
お問い合わせください。

お問い合わせ