🧠Junghanacs

Recent Notes

#아이콘 #이모지 #웹 #개발환경

Jun 23, 20234 min read

히스토리

  • [2024-06-20] 기록
  • 2023-06-23 나는 폰트로 넣는 것 제외하고 뭔가 웹 하는 사람들이 제대로 하는 방법을

모른다. 어떻게 해야 하는가? 여기에 대한 답은 아래에 있다. 먼저, 한글로 작성된 설명글이다. 그 다음에 ox-hugo 만든 분의 기록이 있다. 아마 따라 가면 잘 될 것이다. 일단 이 정도로 기록해 놓는다.

  • [2024-09-11 수정] #랜덤노트

enableEmoji 가 무엇이냐?!

enableEmoji: true hugo 에서 지원해주는 시스템이 있다는 이야인데

/home/junghan/git/scripter.co/content-org/scripter-posts.org

Font-awesome 5 사용법 (한글)

https://www.daleseo.com/font-awesome/

Optimize your FontAwesome

This post briefly goes through the FontAwesome 5 setup, the problem statement and a solution for that.

I signed up for the FontAwesome 5 Pro Kickstarter, and I have to say that this is one of my few Kickstarter fundings that delivered really well!

    Thank you FontAwesome!

FontAwesome 5 Setup

FontAwesome 5 supports an awesome new way of loading icons, using SVG with JS. The benefit is that you simply load one fontawesome-all.js file and everything just works!.

<head>
  <!--load everything-->
  <script defer src="/static/fontawesome/fontawesome-all.js"></script>
</head>
<body>
  <!--icon-->
  <i class="fas fa-user"></i>
</body>

Problem

With FontAwesome 5 Pro, I get about 2700 icons packed in that fontawesome-all.js. While that is great, there are 2 issues:

  1. I don't need all of those 2700 icons on my site. That file is roughly 1.7 MB (minified or not) which I need not unnecessarily load for all my visitors.
  2. Anyone can easily pirate the whole JS file and use it for free!

Solution

The solution is simple --- I just comment out all the lines with SVG code for the icons that I don't use.

But searching for the icons I need in all the icon packs (Solid, Regular, Light, Brand) in that single 5k+ line JS file is not fun, especially when I want to add/remove icons occasionally.

And so fontawesome-choose was born!

  • I list the icons I need in fontawesome-choose-icons.
  • Run M-x fontawesome-choose in the fontawesome-all.js file buffer.

The code is in the next section, but you can also find the latest version in my repo.

Note that while I have used this on Fontawesome 5 Pro, it should work just as well on Fontawesome 5 Free too.

Code

;; Helper function `fontawesome-choose' used to uncomment only the
;; icons the user cares about in `fontawesome-all.js'.
 
(defconst fontawesome-choose-icons '("list-alt" ;categories
                                     "tags"
                                     "rss"
                                     "link"
                                     "heart" ;like
                                     "reply"
                                     "retweet"
                                     "github" ;"github-alt" "github-square"
                                     "twitter" ;"twitter-square"
                                     "gitlab")
  "List of icons to choose from fontawesome-all.js.
Used in `fontawesome-choose'.")
 
(defun fontawesome-choose ()
  "Comment out all icons in fontawesome-all.js except the selected few.
 
Minifying the resultant .js will then remove the commented icons,
thus drastically reducing the minified JS size.
 
Set the `fontawesome-choose-icons' variable to the list of icons
that you want to keep uncommented."
  (interactive)
  (let ((case-fold-search nil)
        (count 0))
    (save-excursion
      (goto-char (point-min))
      (while (re-search-forward "^var icons" nil :noerror)
        (let ((begin (progn
                       (forward-line 1)
                       (point)))
              end)
          (re-search-forward "^\\};")
          (forward-line 0)
          (backward-char 1)
          (setq end (point))
          ;; First comment all the lines
          (save-excursion
            (narrow-to-region begin end)
            (goto-char (point-min))
            (while (re-search-forward "^\\s-*$\"$" nil :noerror)
              (replace-match "// \\1" nil nil nil 1))
            (widen))
          ;; Now uncomment only the selected icons
          (save-excursion
            (narrow-to-region begin end)
            (goto-char (point-min))
            (let* ((icon-regexp (regexp-opt fontawesome-choose-icons 'symbols))
                   (regexp (format "^\\s-*$//\\s-*$\"%s\":" icon-regexp)))
              (while (re-search-forward regexp nil :noerror)
                (replace-match "" nil nil nil 1)
                (setq count (1+ count))))
            (widen))))
      (message "fontawesome-choose: Uncommented %d icons matching %S"
               count fontawesome-choose-icons))))

Result

This solution solves the first problem wonderfully --- After minification, fontawesome-all.js is just 71 KB (down from 1.7 MB).

That's a 25x factor reduction! The minification step is important because that removes all the commented lines from the JS. I do the minification using tdewolff/minify.

The second problem, that of piracy, is difficult to solve completely using this. But whoever pirates this reduced FontAwesome from my site won't get the real deal :sunglasses:.

Emacs-Lisp saves the day once again!

Related-Notes

References

Backlinks

  • No backlinks found