SVG icons

SVGのアイコンをサイト内に追加します。SVGなので拡大縮小ができ、色も文字色で自由に変えることが可能です。
一部のアイコンは他の機能と連携してアニメーションさせることができます。

RADIX が提供する独自の SVG アイコンは、その他外部の有名なアイコンライブラリのような利用を目的としていません。基本的に、RADIXの機能内で必要なアイコンとそれに関連した一部標準的なアイコンをユーザがページ内に自由に追加できるようにしているだけのものです。今後も最低限以上のアイコンの追加を行う予定はありません。

Options

const radix = new Radix({
    icons: {
        active: true,
        selector: '.radix-icon'
    },
});

デフォルトで機能がオンになっているため、基本的にはオプションを変更する必要はありません。

radix-icon クラスをつけた要素をアイコンに置き換えます。置き換える対象のアイコンはその要素の中のテキストで指定します。

Example

<span class="radix-icon">cross</span>

というような要素があった場合、下のように置換されます。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="radix-icon rdx-icon-cross"><path d="M 2 17 L 17 2 L 50 35 L 83 2 L 98 17 L 65 50 L 98 83 L 83 98 L 50 65 L 17 98 L 2 83 L 35 50 L 2 17 Z" fill="currentColor" stroke="none"></path></svg>

radix-icon 以外のクラスや他の属性といった値は一切が無視されて完全に置換されます。スタイル適用を目的としたクラス付けを行いたい場合は、親要素からの参照を用いてください。

All icon list