@openameba/spindle-icons 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -2
- package/dist/pdf/alt.pdf +0 -0
- package/dist/pdf/alt_fill.pdf +0 -0
- package/dist/pdf/table.pdf +0 -0
- package/dist/svg/alt.svg +1 -0
- package/dist/svg/alt_fill.svg +1 -0
- package/dist/svg/sprite.svg +1 -1
- package/dist/svg/table.svg +1 -0
- package/dist/svg-unoptimized/alt.svg +3 -0
- package/dist/svg-unoptimized/alt_fill.svg +3 -0
- package/dist/svg-unoptimized/table.svg +3 -0
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -5,6 +5,9 @@ SVG and PDF Icons with Spindle (Ameba Design System)
|
|
|
5
5
|
 
|
|
6
6
|
|
|
7
7
|
## インストール
|
|
8
|
+
|
|
9
|
+
アイコンを画像ファイルとして利用したい場合には、`@openameba/spindle-icons` をインストールしてください。
|
|
10
|
+
|
|
8
11
|
```
|
|
9
12
|
npm install @openameba/spindle-icons
|
|
10
13
|
```
|
|
@@ -13,6 +16,16 @@ npm install @openameba/spindle-icons
|
|
|
13
16
|
yarn add @openameba/spindle-icons
|
|
14
17
|
```
|
|
15
18
|
|
|
19
|
+
アイコンをReactコンポーネントとして利用したい場合には、`@openameba/spindle-ui` をインストールしてください。
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
npm install @openameba/spindle-ui
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
yarn add @openameba/spindle-ui
|
|
27
|
+
```
|
|
28
|
+
|
|
16
29
|
## 利用方法
|
|
17
30
|
Spindle Iconsで生成されたSVGアイコンは、以下の方法で利用できます。利用できるアイコンは[アイコンリスト](docs/icons.md)を参照してください。img要素、Inline SVG、SVG Spriteでの利用法は[サンプルページ](example/index.html)を参考にしてください。
|
|
18
31
|
|
|
@@ -118,14 +131,24 @@ npx svg-sprite --symbol --symbol-dest=. --symbol-sprite=sprite.svg --shape-tran
|
|
|
118
131
|
Spindle IconsはReactコンポーネントとして利用できます。利用する際には、[Inline SVG](#inline-svg)と同様に、適切なラベリングを忘れないように注意してください。
|
|
119
132
|
|
|
120
133
|
```JavaScript
|
|
121
|
-
import
|
|
134
|
+
import Clock from '@openameba/spindle-ui/Icon/Clock';
|
|
122
135
|
|
|
123
136
|
export function SomeButton() {
|
|
124
137
|
return <button aria-label="時間設定" type="button"><Clock /></button>
|
|
125
138
|
}
|
|
126
139
|
```
|
|
127
140
|
|
|
128
|
-
|
|
141
|
+
ただし、アイコンが装飾として利用される場合には`aria-hidden=true`を指定します。
|
|
142
|
+
|
|
143
|
+
```JavaScript
|
|
144
|
+
import Clock from '@openameba/spindle-ui/Icon/Clock';
|
|
145
|
+
|
|
146
|
+
export function SomeButton() {
|
|
147
|
+
return <button type="button"><Clock aria-hidden="true" />時間設定</button>
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
また、Reactコンポーネントとして利用する際にはリソースサイズやレンダリングパフォーマンスに注意してください。Spindleで提供しているそれぞれのアイコンは大きなサイズではありません。ただし、たくさんのアイコンを読み込みHTMLやJavaScriptに埋め込まれると、容量が大きくなったりレンダリングに時間がかかったりする可能性があります。そうした場合には、以下の方法を検討してください。
|
|
129
152
|
|
|
130
153
|
- アイコンコンポーネントが挿入される場所を分割
|
|
131
154
|
- コンポーネントを非同期に読み込む
|
package/dist/pdf/alt.pdf
ADDED
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/svg/alt.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M18 20.001H6c-2.21 0-4-1.79-4-4v-8c0-2.21 1.79-4 4-4h12c2.21 0 4 1.79 4 4v8c0 2.21-1.79 4-4 4m-12-14c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm1.85 3.26c-1.25 0-2.04.7-2.25.91-.28.28-.28.74 0 1.02.22.22.55.27.85.12.06-.03.13-.09.2-.15.04-.03.07-.06.11-.09.1-.09.47-.37 1.1-.37.52 0 .95.25 1.05.61-.36.18-.98.33-1.31.41-.55.13-2.24.52-2.24 2.16 0 1.21 1.12 2.19 2.51 2.19s2.5-.98 2.51-2.18c.02-.79.02-1.57 0-2.43-.01-1.25-1.09-2.19-2.51-2.19zm1.07 3.58v1.02c-.04.37-.46.76-1.08.76-.58 0-1.07-.34-1.07-.75 0-.17 0-.48 1.14-.76.37-.08.71-.17 1.01-.27m4.94 1.83c-.08-.03-.19-.03-.27-.04h-.1c-.28-.03-.39-.18-.39-.54v-5.7c0-.13 0-.22-.01-.3a.74.74 0 0 0-.7-.56c-.32 0-.62.23-.7.56-.02.09-.02.19-.02.3v5.5c0 .31.01.55.04.68.15.88.74 1.42 1.65 1.5h.19c.12 0 .26 0 .35-.04.29-.09.49-.37.49-.68s-.21-.61-.5-.68zm3.9-.02s-.24-.03-.28-.03c-.34-.05-.48-.24-.49-.62v-2.94h.75c.39 0 .73-.33.73-.72a.74.74 0 0 0-.73-.73h-.75v-1.23c0-.15-.01-.24-.02-.31a.745.745 0 0 0-.7-.55c-.32 0-.62.22-.7.55-.01.07-.01.17-.01.31v1.23h-.47c-.4 0-.73.33-.73.73s.33.72.73.72h.47v3.2c.09 1.08.81 1.75 1.91 1.81.09 0 .21 0 .3-.01.34-.06.6-.36.6-.71a.7.7 0 0 0-.58-.7z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M7.92 13.161c.35-.08.67-.16.95-.25v.95c-.03.34-.43.71-1.03.71-.56 0-1.02-.32-1.02-.7 0-.16 0-.45 1.1-.71M22 8.001v8c0 2.21-1.79 4-4 4H6c-2.21 0-4-1.79-4-4v-8c0-2.21 1.79-4 4-4h12c2.21 0 4 1.79 4 4m-11.6 3.45c-.01-1.28-1.11-2.24-2.56-2.24-1.27 0-2.07.71-2.29.92-.3.3-.3.79 0 1.09.23.23.59.28.91.13.07-.04.14-.1.21-.16.04-.03.07-.06.11-.09.09-.08.45-.36 1.06-.36.48 0 .87.21.99.53-.36.17-.94.31-1.26.39-1.51.35-2.28 1.09-2.28 2.2 0 1.24 1.15 2.24 2.56 2.24s2.54-1 2.56-2.23c.02-.8.02-1.57 0-2.44zm4.01 3.9c0-.35-.22-.65-.53-.73-.09-.03-.19-.03-.29-.04h-.1c-.21-.03-.34-.12-.34-.49v-5.7c0-.13 0-.23-.01-.31a.78.78 0 0 0-.75-.59c-.35 0-.66.25-.75.6-.02.09-.02.19-.02.31v5.5c0 .18 0 .51.04.69.16.91.76 1.45 1.7 1.54h.19c.13 0 .27-.01.36-.05.31-.09.52-.39.52-.73zm2.63-1.35v-2.89h.7c.42 0 .78-.35.78-.77s-.35-.78-.78-.78h-.7v-1.18c0-.15-.01-.25-.03-.32a.78.78 0 0 0-.75-.58c-.35 0-.66.24-.75.59-.01.08-.01.17-.01.32v1.18h-.42c-.43 0-.78.35-.78.78s.36.77.78.77h.42v3.15c.1 1.1.83 1.8 1.96 1.86.1 0 .21 0 .3-.01a.78.78 0 0 0 .64-.76c0-.37-.26-.69-.61-.75-.05-.02-.29-.03-.29-.03-.26-.04-.44-.15-.45-.57z"/></svg>
|