tháng 5 30, 2021

Cài đặt FontAwesome trong Phoenix

Cài đặt FontAwesome trong Phoenix

Vì sao cần tới font-awesome?

Trong bài giới thiệu về Tailwind CSS, ta đã có thể cài đặt và sử dụng tailwindcss để xây dựng giao diện cho ứng dụng web cùng với Phoenix framework. Tailwind thực sự rất linh hoạt và mạnh mẽ. Tuy nhiên, một trong những khuyết điểm của tailwind đó là thiếu đi bộ icon tiện dụng như font-awesome.

Không cần tới bộ icon của font-awesome, ta có thể thêm thủ công những icon qua svg vector bằng cách sử dụng <svg> tag và svg-path như sau.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
   <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
Icon chiếc khoá

Khi đó tốc độ hiển thị icon trên giao diện rất nhanh nhưng để làm được bằng cách này ta phải biết svg path của icon đó như thế nào. Và việc này không hề dễ dàng gì và làm ta tốn khá nhiều thời gian.

Và đây là lúc sự tiện dụng của bộ font-awesome được thể hiện. Chỉ cần <i> tag và tên class của icon, ta có thể dễ dàng hiển thị chúng lên giao diện.

<i class="fab fa-phoenix-framework"></i>
Icon Phoenix framework

Cài đặt font-awesome trong Phoenix

Bước 1 - Cài package fontawesome-free qua npm

$ cd assets
$ npm install --save-dev @fortawesome/fontawesome-free

Khi đó,  thư viện được thêm vào devDependencies trong file package.json

..
"devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.9.0",
...

Bước 2 - Cài đặt package file-loader

Để có thể load được các file font của font-awesome đã cài đặt trong node_modules, ta cần cài đặt thêm package file-loader.

$ cd assets
$ npm install file-loader

Bước 3 - Cập nhật file config của webpack

Để copy được các file font của font-awesome và extract file SCSS file, thêm rule mới vào bên dưới CSS rule như sau.

module: {
    rules: [
    { // JS rule
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
        	loader: 'babel-loader'
    	}
    },
    { // CSS rule
        test: /\.[s]?css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'sass-loader',
        ],
    },
    { // FONT rules
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
            loader: 'file-loader', // <----- đảm bảo file-loader đã cài đặt
            options: {
            	name: '[name].[ext]',
            	outputPath: '../fonts'
            }
        }]
    }]
},

Bước 4 - Import font-awesome vào app.scss

Tạo file _variables.scss trong thư mục assets/css với nội dung

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

Cuối cùng, import font-awesome vào file app.scss bằng cách thêm vào đầu file nội dung sau.

@import "variables";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

Chú ý: dĩ nhiên có thể thêm trực tiếp biến $fa-font-path trong file _variables.scss vào app.scss

/* @import "variables"; */
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

....

nhưng ta nên để ra file riêng để dễ dàng quản lý cùng với các biến khác (nếu có).

Giới thiệu thư viện font_awesomex

Đây là thư viện có thể tích hợp với Phoenix, giúp ta tạo ra <i> tag của font-awesome. Chú ý nó chỉ đơn thuần tạo code html chứ không thể thay thế được 4 bước cài đặt font-awesome ở phần trên.

Để cài đặt trước tiên, ta cần thêm thư viện vào mix.ex

def deps do
  ...
  [{:font_awesomex, "~> 4.0.0"}]
end

Tiếp đó chạy câu lệnh `mix deps.get` để tiến hành tải và cài đặt thư viện vào Phoenix. Sau khi cài xong, ta có thể thử sử dụng ngay trên iex như sau.

$ iex -S mix
iex> icon = FontAwesome.icon(:stop_circle, outline: true, size: 3)
%FontAwesome{name: "stop-circle", outline: true, size: 3, ...}

iex> to_string(icon)
"<i class=\"fa fa-stop-circle-o fa-size-3x\"></i>"

Các cách sử dụng với Phoenix ta có thể tham khảo tài liệu chi tiết của thư viên trên Hexdocs.

Hy vọng bài viết có thể giúp ích cho bạn trong việc cài đặt và sử dụng thành công font-awesome trên Phoenix.

@Neit