Font Awesomeをコンポーネント化
7600 ワード
Font Awesomeを普通に使うなら...
<i class="fa fa-camera-retro"></i>
と書くわけですが、
<fa icon="camera-retro" />
って書けると幸せだよね、ということでRiot.js用に作ってみました。コードの全体はこちら。
<fa>
<style>
@font-face {
font-family: 'FontAwesome';
src: url('<フォントのURL>') format('woff'), url('<フォントのURL>') format('svg');
font-weight: normal;
font-style: normal;
}
fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
</style>
<script>
GLYPHS = {
'glass': 'f000',
'music': 'f001',
'search': 'f002',
'envelope-o': 'f003',
'heart': 'f004',
'star': 'f005',
...
}
this.root.innerHTML = '&#x' + GLYPHS[opts.icon] + ';'
</script>
</fa>
2倍3倍表示とか回転とかは省いていますが、このシンプルさ、伝わるでしょうか...?
使ってみます
Riot.jsの作法に従ってマウントします。この例では、ブラウザ内でコンパイルしていますが、他のコンポーネントとまとめてプリコンパイルする方がオススメです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font Awesome is awesome!</title>
</head>
<body>
This is my <fa icon="camera-retro"></fa>.
<script src="components/fa.tag" type="riot/tag"></script>
<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<script>riot.mount('*')</script>
</body>
</html>
参考
参考にPolymerとReactによる実装のリンクも。どちらも、Font AwesomeのCSSを別途読み込む形になっています。バージョンの追従を考えるといたしかたないのかなとも思いつつ、ただラッピングしてるだけって「コンポーネント」としてはどうなんだろう。
- polymer-fontawesome - Polymerによる実装例
- react-fa - Reactによる実装例
Author And Source
この問題について(Font Awesomeをコンポーネント化), 我々は、より多くの情報をここで見つけました https://qiita.com/cognitom/items/dc9b7a7a8cc7d856e634著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .