diff --git a/packages/spindle-icons/README.md b/packages/spindle-icons/README.md index 726af377e..b7a54f4f6 100644 --- a/packages/spindle-icons/README.md +++ b/packages/spindle-icons/README.md @@ -1,25 +1,48 @@ # Spindle Icons (In development) -- [アイコンリスト](icons.md) -- [Design Doc](design-doc.md) +SVG and PDF Icons with Spindle (Ameba Design System) + +> Spindle Iconsは試験開発中のため、大幅に変更される可能性があります。安定版リリースまでの間はバージョン番号は0となり、バージョンに関わらずbreaking changeが行われることがありますので、利用時には注意してください。変更内容は、[CHANGELOG](CHANGELOG.md)に記載されています。 + +![See licence in readme.md](https://img.shields.io/npm/l/@openameba/spindle-icons) ![npm](https://img.shields.io/npm/v/@openameba/spindle-icons) + +## インストール +``` +npm install @openameba/spindle-icons +``` + +``` +yarn add @openameba/spindle-icons +``` ## 利用方法 -Spindle Iconsで生成されたSVGアイコンは、以下の方法で利用できます。 +Spindle Iconsで生成されたSVGアイコンは、以下の方法で利用できます。利用できるアイコンは[アイコンリスト](docs/icons.md)を参照してください。 ### img要素 最も簡単な利用方法は、img要素としてSVGファイルを読み込むことです。いくつかのスクリーンリーダーでは、SVG読み込みするimg要素の`alt`属性のテキストを省略するため、`role="img"`を付与します。 -ただし、この方法ではアイコンの表示色を指定できないため、多くの要件を満たせないでしょう。 +ただし、この方法ではアイコンの表示色を指定できないため、要件を満たせない場合があります。 ```html ``` ## Inline SVG -SVGをHTMLに埋め込みます。アイコンは様々なコンテキストで利用される可能性があるため、Spindle Iconsで生成するSVG自体にタイトルは設定されていません。利用時には、都度テキストを挿入する必要があります。 +SVGをHTMLに埋め込みます。 + +SVGを埋め込むには、HTMLファイルにSVG文字列をそのまま埋め込むか、テンプレートエンジンやバンドラなどでビルドします。 + +```pug +//- Pugの例 + +button(aria-label="時間設定") + include 'node_modules/@opanameba/spindle-icons/dist/svg/clock.svg' +``` + +アイコンは様々なコンテキストで利用される可能性があるため、Spindle Iconsで生成するSVG自体にタイトルは設定されていません。利用時には、都度テキストを挿入する必要があります。 一つの方法として、テキストをspan要素などを使って、非表示のテキストとして指定します。 @@ -60,9 +83,29 @@ SVGを装飾として利用する場合には、テキストと同時に利用 ### SVG Sprite -アプリケーションでは、一般的に複数のアイコンが利用されるため、SVG Spriteも有効な手段です。 +アプリケーションでは、一般的に複数のアイコンが利用されるため、SVG Spriteも有効な手段です。Spindle Iconsではすべてのアイコンで作られた[sprite.svg](dist/svg/sprite.svg)を配布しています。ただしファイル容量も大きいので、[svg-sprite](https://github.com/jkphl/svg-sprite)などを利用して、必要なアイコンのみでSVG Spriteを生成することを推奨します。 + +```sh +# 必要なアイコンのみでSVG Spriteを生成する例 +# 各オプションはそれぞれのプロジェクトに合わせて設定します + +npx svg-sprite --symbol --symbol-dest=. --symbol-sprite=sprite.svg --shape-transform-svgo sprite.svgo.json --dest=$PATH_TO_SVG 'node_modules/@openameba/spindle-icons/dist/+(check|exclamationmark).svg' + +# sprite.svgo.jsonの例 +# SVG各ファイルに付与されている無駄なfillを消したい場合に設定します +{ + "plugins": [ + { + "removeAttrs": + { + "attrs": "fill" + } + } + ] +} +``` -テキストはsvg要素内の`title`属性で指定し、svg要素の`aria-labelledby`属性から参照します。Inline SVGと同様に、`.visually-hidden`要素や `aria-label`でテキストを指定します。装飾用途ではタイトルを省略できます。 +アイコンを利用する際には、ラベリングを忘れないようにしてください。テキストはsvg要素内の`title`属性で指定し、svg要素の`aria-labelledby`属性から参照します。Inline SVGと同様に、`.visually-hidden`要素や `aria-label`でテキストを指定します。装飾用途ではタイトルを省略できます。 ```html } +``` -function SvgClock({ - title, - titleId, - ...props -}: React.SVGProps & SVGRProps) { - return ( - - {title ? {title} : null} - - - ); -} -export default SvgClock; -``` ## ライセンス Spindle Iconsは以下2つのライセンスで公開されています。 - SVGファイルは、Creative Commons BY-NC-ND 4.0 - ソースコードは、MIT License + +## 関連ドキュメント +- [アイコンリスト](docs/icons.md) +- [Design Doc](docs/design-doc.md) diff --git a/packages/spindle-icons/design-doc.md b/packages/spindle-icons/docs/design-doc.md similarity index 100% rename from packages/spindle-icons/design-doc.md rename to packages/spindle-icons/docs/design-doc.md diff --git a/packages/spindle-icons/docs/icons.md b/packages/spindle-icons/docs/icons.md new file mode 100644 index 000000000..73505c2f5 --- /dev/null +++ b/packages/spindle-icons/docs/icons.md @@ -0,0 +1,272 @@ +## Icon List +| name | image | +|---|:-:| +| 755 | ![](../dist/svg/755.svg) | +| abemakun | ![](../dist/svg/abemakun.svg) | +| abematv | ![](../dist/svg/abematv.svg) | +| accesslink | ![](../dist/svg/accesslink.svg) | +| accesspage | ![](../dist/svg/accesspage.svg) | +| accesspage_fill | ![](../dist/svg/accesspage_fill.svg) | +| addressbook_fill | ![](../dist/svg/addressbook_fill.svg) | +| album_add_fill | ![](../dist/svg/album_add_fill.svg) | +| album_fill | ![](../dist/svg/album_fill.svg) | +| align_left | ![](../dist/svg/align_left.svg) | +| all_fill | ![](../dist/svg/all_fill.svg) | +| amegold | ![](../dist/svg/amegold.svg) | +| amember | ![](../dist/svg/amember.svg) | +| arrow_down | ![](../dist/svg/arrow_down.svg) | +| arrow_down_bold | ![](../dist/svg/arrow_down_bold.svg) | +| arrow_left | ![](../dist/svg/arrow_left.svg) | +| arrow_left_bold | ![](../dist/svg/arrow_left_bold.svg) | +| arrow_right | ![](../dist/svg/arrow_right.svg) | +| arrow_right_bold | ![](../dist/svg/arrow_right_bold.svg) | +| arrow_right_circle | ![](../dist/svg/arrow_right_circle.svg) | +| arrow_right_circle_fill | ![](../dist/svg/arrow_right_circle_fill.svg) | +| arrow_up | ![](../dist/svg/arrow_up.svg) | +| arrow_up_bold | ![](../dist/svg/arrow_up_bold.svg) | +| arrowpaging_down | ![](../dist/svg/arrowpaging_down.svg) | +| arrowpaging_down_circle | ![](../dist/svg/arrowpaging_down_circle.svg) | +| arrowpaging_left | ![](../dist/svg/arrowpaging_left.svg) | +| arrowpaging_left_circle | ![](../dist/svg/arrowpaging_left_circle.svg) | +| arrowpaging_right | ![](../dist/svg/arrowpaging_right.svg) | +| arrowpaging_right_circle | ![](../dist/svg/arrowpaging_right_circle.svg) | +| arrowpaging_up | ![](../dist/svg/arrowpaging_up.svg) | +| arrowpaging_up_circle | ![](../dist/svg/arrowpaging_up_circle.svg) | +| article | ![](../dist/svg/article.svg) | +| astrogy | ![](../dist/svg/astrogy.svg) | +| astrogy_fill | ![](../dist/svg/astrogy_fill.svg) | +| bbs | ![](../dist/svg/bbs.svg) | +| beginner | ![](../dist/svg/beginner.svg) | +| bell | ![](../dist/svg/bell.svg) | +| bell_fill | ![](../dist/svg/bell_fill.svg) | +| bell_fill_slash | ![](../dist/svg/bell_fill_slash.svg) | +| bell_slash | ![](../dist/svg/bell_slash.svg) | +| blog | ![](../dist/svg/blog.svg) | +| book | ![](../dist/svg/book.svg) | +| book_fill | ![](../dist/svg/book_fill.svg) | +| bookmark | ![](../dist/svg/bookmark.svg) | +| bookmark_fill | ![](../dist/svg/bookmark_fill.svg) | +| bottomnav_followfeed_active | ![](../dist/svg/bottomnav_followfeed_active.svg) | +| bottomnav_followfeed_inactive | ![](../dist/svg/bottomnav_followfeed_inactive.svg) | +| bottomnav_home_active | ![](../dist/svg/bottomnav_home_active.svg) | +| bottomnav_home_inactive | ![](../dist/svg/bottomnav_home_inactive.svg) | +| bottomnav_mypage_active | ![](../dist/svg/bottomnav_mypage_active.svg) | +| bottomnav_search_active | ![](../dist/svg/bottomnav_search_active.svg) | +| bottomnav_search_inactive | ![](../dist/svg/bottomnav_search_inactive.svg) | +| bottomnvav_mypage_inactive | ![](../dist/svg/bottomnvav_mypage_inactive.svg) | +| bullets | ![](../dist/svg/bullets.svg) | +| calendar | ![](../dist/svg/calendar.svg) | +| camera_fill | ![](../dist/svg/camera_fill.svg) | +| caution_fill | ![](../dist/svg/caution_fill.svg) | +| check | ![](../dist/svg/check.svg) | +| check_bold | ![](../dist/svg/check_bold.svg) | +| check_circle | ![](../dist/svg/check_circle.svg) | +| check_circle_fill | ![](../dist/svg/check_circle_fill.svg) | +| checklist | ![](../dist/svg/checklist.svg) | +| chevron_down | ![](../dist/svg/chevron_down.svg) | +| chevron_down_bold | ![](../dist/svg/chevron_down_bold.svg) | +| chevron_left | ![](../dist/svg/chevron_left.svg) | +| chevron_left_bold | ![](../dist/svg/chevron_left_bold.svg) | +| chevron_right | ![](../dist/svg/chevron_right.svg) | +| chevron_right_bold | ![](../dist/svg/chevron_right_bold.svg) | +| chevron_up | ![](../dist/svg/chevron_up.svg) | +| chevron_up_bold | ![](../dist/svg/chevron_up_bold.svg) | +| circle_fill | ![](../dist/svg/circle_fill.svg) | +| clock | ![](../dist/svg/clock.svg) | +| clock_fill | ![](../dist/svg/clock_fill.svg) | +| coin | ![](../dist/svg/coin.svg) | +| comment | ![](../dist/svg/comment.svg) | +| comment_fill | ![](../dist/svg/comment_fill.svg) | +| comment_pen | ![](../dist/svg/comment_pen.svg) | +| comment_two_fill | ![](../dist/svg/comment_two_fill.svg) | +| comment_two_slash_fill | ![](../dist/svg/comment_two_slash_fill.svg) | +| community | ![](../dist/svg/community.svg) | +| coupon | ![](../dist/svg/coupon.svg) | +| crop_din | ![](../dist/svg/crop_din.svg) | +| crop_landscape | ![](../dist/svg/crop_landscape.svg) | +| cross | ![](../dist/svg/cross.svg) | +| cross_bold | ![](../dist/svg/cross_bold.svg) | +| cross_circle | ![](../dist/svg/cross_circle.svg) | +| cross_circle_fill | ![](../dist/svg/cross_circle_fill.svg) | +| dot | ![](../dist/svg/dot.svg) | +| dotmoney | ![](../dist/svg/dotmoney.svg) | +| embed | ![](../dist/svg/embed.svg) | +| emotion_fill | ![](../dist/svg/emotion_fill.svg) | +| entry_lost | ![](../dist/svg/entry_lost.svg) | +| exclamationmark | ![](../dist/svg/exclamationmark.svg) | +| exclamationmark_bold | ![](../dist/svg/exclamationmark_bold.svg) | +| exclamationmark_circle | ![](../dist/svg/exclamationmark_circle.svg) | +| exclamationmark_circle_fill | ![](../dist/svg/exclamationmark_circle_fill.svg) | +| expand | ![](../dist/svg/expand.svg) | +| expand_exit | ![](../dist/svg/expand_exit.svg) | +| facebook | ![](../dist/svg/facebook.svg) | +| file | ![](../dist/svg/file.svg) | +| file_add | ![](../dist/svg/file_add.svg) | +| file_add_fill | ![](../dist/svg/file_add_fill.svg) | +| file_circle | ![](../dist/svg/file_circle.svg) | +| file_circle_fill | ![](../dist/svg/file_circle_fill.svg) | +| file_fill | ![](../dist/svg/file_fill.svg) | +| filter | ![](../dist/svg/filter.svg) | +| fit | ![](../dist/svg/fit.svg) | +| flag_fill | ![](../dist/svg/flag_fill.svg) | +| flag_ranking | ![](../dist/svg/flag_ranking.svg) | +| flag_ranking_trim | ![](../dist/svg/flag_ranking_trim.svg) | +| flash | ![](../dist/svg/flash.svg) | +| flash_auto | ![](../dist/svg/flash_auto.svg) | +| flash_off | ![](../dist/svg/flash_off.svg) | +| folder | ![](../dist/svg/folder.svg) | +| folder_fill | ![](../dist/svg/folder_fill.svg) | +| folder_two | ![](../dist/svg/folder_two.svg) | +| folder_two_fill | ![](../dist/svg/folder_two_fill.svg) | +| font | ![](../dist/svg/font.svg) | +| fontstyle | ![](../dist/svg/fontstyle.svg) | +| game | ![](../dist/svg/game.svg) | +| game_fill | ![](../dist/svg/game_fill.svg) | +| game_kantan | ![](../dist/svg/game_kantan.svg) | +| genre | ![](../dist/svg/genre.svg) | +| genre_add | ![](../dist/svg/genre_add.svg) | +| genre_done | ![](../dist/svg/genre_done.svg) | +| graph_bar | ![](../dist/svg/graph_bar.svg) | +| gruppo | ![](../dist/svg/gruppo.svg) | +| hand_wave_fill | ![](../dist/svg/hand_wave_fill.svg) | +| hatenabookmark | ![](../dist/svg/hatenabookmark.svg) | +| heart | ![](../dist/svg/heart.svg) | +| heart_fill | ![](../dist/svg/heart_fill.svg) | +| history | ![](../dist/svg/history.svg) | +| home_fill | ![](../dist/svg/home_fill.svg) | +| hot | ![](../dist/svg/hot.svg) | +| htmltag | ![](../dist/svg/htmltag.svg) | +| image_ban_fill | ![](../dist/svg/image_ban_fill.svg) | +| image_fill | ![](../dist/svg/image_fill.svg) | +| image_question_fill | ![](../dist/svg/image_question_fill.svg) | +| information | ![](../dist/svg/information.svg) | +| instagram | ![](../dist/svg/instagram.svg) | +| kaomoji | ![](../dist/svg/kaomoji.svg) | +| keyboard | ![](../dist/svg/keyboard.svg) | +| keyboard_fill | ![](../dist/svg/keyboard_fill.svg) | +| koeblog | ![](../dist/svg/koeblog.svg) | +| line_circle | ![](../dist/svg/line_circle.svg) | +| line_square | ![](../dist/svg/line_square.svg) | +| link | ![](../dist/svg/link.svg) | +| loading | ![](../dist/svg/loading.svg) | +| lock_fill | ![](../dist/svg/lock_fill.svg) | +| magicwand | ![](../dist/svg/magicwand.svg) | +| mail | ![](../dist/svg/mail.svg) | +| mail_check | ![](../dist/svg/mail_check.svg) | +| mail_circle | ![](../dist/svg/mail_circle.svg) | +| mail_circle_fill | ![](../dist/svg/mail_circle_fill.svg) | +| mail_fill | ![](../dist/svg/mail_fill.svg) | +| menu_hamburger | ![](../dist/svg/menu_hamburger.svg) | +| menu_hamburger_bold | ![](../dist/svg/menu_hamburger_bold.svg) | +| menu_hamburger_fourline | ![](../dist/svg/menu_hamburger_fourline.svg) | +| menu_horizotal | ![](../dist/svg/menu_horizotal.svg) | +| menu_vertical | ![](../dist/svg/menu_vertical.svg) | +| messageboard | ![](../dist/svg/messageboard.svg) | +| microphone | ![](../dist/svg/microphone.svg) | +| microphone_fill | ![](../dist/svg/microphone_fill.svg) | +| movie_camera_fill | ![](../dist/svg/movie_camera_fill.svg) | +| movie_play | ![](../dist/svg/movie_play.svg) | +| movie_play_fill | ![](../dist/svg/movie_play_fill.svg) | +| movie_stop | ![](../dist/svg/movie_stop.svg) | +| music_fill | ![](../dist/svg/music_fill.svg) | +| new | ![](../dist/svg/new.svg) | +| news | ![](../dist/svg/news.svg) | +| nice | ![](../dist/svg/nice.svg) | +| nice_done | ![](../dist/svg/nice_done.svg) | +| nodate | ![](../dist/svg/nodate.svg) | +| now | ![](../dist/svg/now.svg) | +| officialstar | ![](../dist/svg/officialstar.svg) | +| officialstar_fill | ![](../dist/svg/officialstar_fill.svg) | +| onedari_fill | ![](../dist/svg/onedari_fill.svg) | +| open_cl | ![](../dist/svg/open_cl.svg) | +| openblank | ![](../dist/svg/openblank.svg) | +| openblank_fill | ![](../dist/svg/openblank_fill.svg) | +| ownd | ![](../dist/svg/ownd.svg) | +| palette_fill | ![](../dist/svg/palette_fill.svg) | +| pause_bold | ![](../dist/svg/pause_bold.svg) | +| pencil | ![](../dist/svg/pencil.svg) | +| pencil_add | ![](../dist/svg/pencil_add.svg) | +| pencil_bold | ![](../dist/svg/pencil_bold.svg) | +| person | ![](../dist/svg/person.svg) | +| person_fill | ![](../dist/svg/person_fill.svg) | +| person_three_fill | ![](../dist/svg/person_three_fill.svg) | +| person_two_add_fill | ![](../dist/svg/person_two_add_fill.svg) | +| person_two_delete_fill | ![](../dist/svg/person_two_delete_fill.svg) | +| person_two_done_fill | ![](../dist/svg/person_two_done_fill.svg) | +| person_two_fill | ![](../dist/svg/person_two_fill.svg) | +| peta | ![](../dist/svg/peta.svg) | +| pigg | ![](../dist/svg/pigg.svg) | +| play_circle | ![](../dist/svg/play_circle.svg) | +| play_fill | ![](../dist/svg/play_fill.svg) | +| plus | ![](../dist/svg/plus.svg) | +| plus_bold | ![](../dist/svg/plus_bold.svg) | +| plus_circle | ![](../dist/svg/plus_circle.svg) | +| plus_circle_fill | ![](../dist/svg/plus_circle_fill.svg) | +| premium_fill | ![](../dist/svg/premium_fill.svg) | +| present | ![](../dist/svg/present.svg) | +| profilecard | ![](../dist/svg/profilecard.svg) | +| qr | ![](../dist/svg/qr.svg) | +| question | ![](../dist/svg/question.svg) | +| questionmark_circle | ![](../dist/svg/questionmark_circle.svg) | +| questionmark_circle_fill | ![](../dist/svg/questionmark_circle_fill.svg) | +| ranking_crown | ![](../dist/svg/ranking_crown.svg) | +| ranking_crown_fill | ![](../dist/svg/ranking_crown_fill.svg) | +| ranking_platform_fill | ![](../dist/svg/ranking_platform_fill.svg) | +| reblog | ![](../dist/svg/reblog.svg) | +| reblog_slash | ![](../dist/svg/reblog_slash.svg) | +| refresh | ![](../dist/svg/refresh.svg) | +| reply_circle_fill | ![](../dist/svg/reply_circle_fill.svg) | +| reply_fill | ![](../dist/svg/reply_fill.svg) | +| requ | ![](../dist/svg/requ.svg) | +| sad | ![](../dist/svg/sad.svg) | +| saveblog | ![](../dist/svg/saveblog.svg) | +| screen_full | ![](../dist/svg/screen_full.svg) | +| screen_inline | ![](../dist/svg/screen_inline.svg) | +| search | ![](../dist/svg/search.svg) | +| service | ![](../dist/svg/service.svg) | +| setting | ![](../dist/svg/setting.svg) | +| share | ![](../dist/svg/share.svg) | +| shine_fill | ![](../dist/svg/shine_fill.svg) | +| sideface_close | ![](../dist/svg/sideface_close.svg) | +| sideface_open | ![](../dist/svg/sideface_open.svg) | +| smartphone | ![](../dist/svg/smartphone.svg) | +| smartphone_fill | ![](../dist/svg/smartphone_fill.svg) | +| sort | ![](../dist/svg/sort.svg) | +| sort_feed | ![](../dist/svg/sort_feed.svg) | +| sort_tile | ![](../dist/svg/sort_tile.svg) | +| speaker_off_fill | ![](../dist/svg/speaker_off_fill.svg) | +| speaker_on_fill | ![](../dist/svg/speaker_on_fill.svg) | +| sprout | ![](../dist/svg/sprout.svg) | +| stampside | ![](../dist/svg/stampside.svg) | +| star | ![](../dist/svg/star.svg) | +| star_circle_fill | ![](../dist/svg/star_circle_fill.svg) | +| star_face_fill | ![](../dist/svg/star_face_fill.svg) | +| star_fill | ![](../dist/svg/star_fill.svg) | +| stop_fill | ![](../dist/svg/stop_fill.svg) | +| switching | ![](../dist/svg/switching.svg) | +| switching_camera | ![](../dist/svg/switching_camera.svg) | +| tag_fill | ![](../dist/svg/tag_fill.svg) | +| tag_official_fill | ![](../dist/svg/tag_official_fill.svg) | +| topblogger_ribbon | ![](../dist/svg/topblogger_ribbon.svg) | +| transcript_off | ![](../dist/svg/transcript_off.svg) | +| transcript_on | ![](../dist/svg/transcript_on.svg) | +| transmission | ![](../dist/svg/transmission.svg) | +| trashcan | ![](../dist/svg/trashcan.svg) | +| trend | ![](../dist/svg/trend.svg) | +| trend_fill | ![](../dist/svg/trend_fill.svg) | +| triangle_down | ![](../dist/svg/triangle_down.svg) | +| triangle_left | ![](../dist/svg/triangle_left.svg) | +| triangle_right | ![](../dist/svg/triangle_right.svg) | +| triangle_up | ![](../dist/svg/triangle_up.svg) | +| trianglearrow_down | ![](../dist/svg/trianglearrow_down.svg) | +| trianglearrow_downright | ![](../dist/svg/trianglearrow_downright.svg) | +| trianglearrow_right | ![](../dist/svg/trianglearrow_right.svg) | +| trianglearrow_up | ![](../dist/svg/trianglearrow_up.svg) | +| trianglearrow_upright | ![](../dist/svg/trianglearrow_upright.svg) | +| triangleend_left | ![](../dist/svg/triangleend_left.svg) | +| triangleend_right | ![](../dist/svg/triangleend_right.svg) | +| trophy_fill | ![](../dist/svg/trophy_fill.svg) | +| tv_fill | ![](../dist/svg/tv_fill.svg) | +| twitter | ![](../dist/svg/twitter.svg) | +| webview | ![](../dist/svg/webview.svg) | +| youtube | ![](../dist/svg/youtube.svg) | diff --git a/packages/spindle-icons/icons.md b/packages/spindle-icons/icons.md deleted file mode 100644 index fa95ae7db..000000000 --- a/packages/spindle-icons/icons.md +++ /dev/null @@ -1,272 +0,0 @@ -## Icon List -| name | image | -|---|:-:| -| 755 | ![](dist/svg/755.svg) | -| abemakun | ![](dist/svg/abemakun.svg) | -| abematv | ![](dist/svg/abematv.svg) | -| accesslink | ![](dist/svg/accesslink.svg) | -| accesspage | ![](dist/svg/accesspage.svg) | -| accesspage_fill | ![](dist/svg/accesspage_fill.svg) | -| addressbook_fill | ![](dist/svg/addressbook_fill.svg) | -| album_add_fill | ![](dist/svg/album_add_fill.svg) | -| album_fill | ![](dist/svg/album_fill.svg) | -| align_left | ![](dist/svg/align_left.svg) | -| all_fill | ![](dist/svg/all_fill.svg) | -| amegold | ![](dist/svg/amegold.svg) | -| amember | ![](dist/svg/amember.svg) | -| arrow_down | ![](dist/svg/arrow_down.svg) | -| arrow_down_bold | ![](dist/svg/arrow_down_bold.svg) | -| arrow_left | ![](dist/svg/arrow_left.svg) | -| arrow_left_bold | ![](dist/svg/arrow_left_bold.svg) | -| arrow_right | ![](dist/svg/arrow_right.svg) | -| arrow_right_bold | ![](dist/svg/arrow_right_bold.svg) | -| arrow_right_circle | ![](dist/svg/arrow_right_circle.svg) | -| arrow_right_circle_fill | ![](dist/svg/arrow_right_circle_fill.svg) | -| arrow_up | ![](dist/svg/arrow_up.svg) | -| arrow_up_bold | ![](dist/svg/arrow_up_bold.svg) | -| arrowpaging_down | ![](dist/svg/arrowpaging_down.svg) | -| arrowpaging_down_circle | ![](dist/svg/arrowpaging_down_circle.svg) | -| arrowpaging_left | ![](dist/svg/arrowpaging_left.svg) | -| arrowpaging_left_circle | ![](dist/svg/arrowpaging_left_circle.svg) | -| arrowpaging_right | ![](dist/svg/arrowpaging_right.svg) | -| arrowpaging_right_circle | ![](dist/svg/arrowpaging_right_circle.svg) | -| arrowpaging_up | ![](dist/svg/arrowpaging_up.svg) | -| arrowpaging_up_circle | ![](dist/svg/arrowpaging_up_circle.svg) | -| article | ![](dist/svg/article.svg) | -| astrogy | ![](dist/svg/astrogy.svg) | -| astrogy_fill | ![](dist/svg/astrogy_fill.svg) | -| bbs | ![](dist/svg/bbs.svg) | -| beginner | ![](dist/svg/beginner.svg) | -| bell | ![](dist/svg/bell.svg) | -| bell_fill | ![](dist/svg/bell_fill.svg) | -| bell_fill_slash | ![](dist/svg/bell_fill_slash.svg) | -| bell_slash | ![](dist/svg/bell_slash.svg) | -| blog | ![](dist/svg/blog.svg) | -| book | ![](dist/svg/book.svg) | -| book_fill | ![](dist/svg/book_fill.svg) | -| bookmark | ![](dist/svg/bookmark.svg) | -| bookmark_fill | ![](dist/svg/bookmark_fill.svg) | -| bottomnav_followfeed_active | ![](dist/svg/bottomnav_followfeed_active.svg) | -| bottomnav_followfeed_inactive | ![](dist/svg/bottomnav_followfeed_inactive.svg) | -| bottomnav_home_active | ![](dist/svg/bottomnav_home_active.svg) | -| bottomnav_home_inactive | ![](dist/svg/bottomnav_home_inactive.svg) | -| bottomnav_mypage_active | ![](dist/svg/bottomnav_mypage_active.svg) | -| bottomnav_search_active | ![](dist/svg/bottomnav_search_active.svg) | -| bottomnav_search_inactive | ![](dist/svg/bottomnav_search_inactive.svg) | -| bottomnvav_mypage_inactive | ![](dist/svg/bottomnvav_mypage_inactive.svg) | -| bullets | ![](dist/svg/bullets.svg) | -| calendar | ![](dist/svg/calendar.svg) | -| camera_fill | ![](dist/svg/camera_fill.svg) | -| caution_fill | ![](dist/svg/caution_fill.svg) | -| check | ![](dist/svg/check.svg) | -| check_bold | ![](dist/svg/check_bold.svg) | -| check_circle | ![](dist/svg/check_circle.svg) | -| check_circle_fill | ![](dist/svg/check_circle_fill.svg) | -| checklist | ![](dist/svg/checklist.svg) | -| chevron_down | ![](dist/svg/chevron_down.svg) | -| chevron_down_bold | ![](dist/svg/chevron_down_bold.svg) | -| chevron_left | ![](dist/svg/chevron_left.svg) | -| chevron_left_bold | ![](dist/svg/chevron_left_bold.svg) | -| chevron_right | ![](dist/svg/chevron_right.svg) | -| chevron_right_bold | ![](dist/svg/chevron_right_bold.svg) | -| chevron_up | ![](dist/svg/chevron_up.svg) | -| chevron_up_bold | ![](dist/svg/chevron_up_bold.svg) | -| circle_fill | ![](dist/svg/circle_fill.svg) | -| clock | ![](dist/svg/clock.svg) | -| clock_fill | ![](dist/svg/clock_fill.svg) | -| coin | ![](dist/svg/coin.svg) | -| comment | ![](dist/svg/comment.svg) | -| comment_fill | ![](dist/svg/comment_fill.svg) | -| comment_pen | ![](dist/svg/comment_pen.svg) | -| comment_two_fill | ![](dist/svg/comment_two_fill.svg) | -| comment_two_slash_fill | ![](dist/svg/comment_two_slash_fill.svg) | -| community | ![](dist/svg/community.svg) | -| coupon | ![](dist/svg/coupon.svg) | -| crop_din | ![](dist/svg/crop_din.svg) | -| crop_landscape | ![](dist/svg/crop_landscape.svg) | -| cross | ![](dist/svg/cross.svg) | -| cross_bold | ![](dist/svg/cross_bold.svg) | -| cross_circle | ![](dist/svg/cross_circle.svg) | -| cross_circle_fill | ![](dist/svg/cross_circle_fill.svg) | -| dot | ![](dist/svg/dot.svg) | -| dotmoney | ![](dist/svg/dotmoney.svg) | -| embed | ![](dist/svg/embed.svg) | -| emotion_fill | ![](dist/svg/emotion_fill.svg) | -| entry_lost | ![](dist/svg/entry_lost.svg) | -| exclamationmark | ![](dist/svg/exclamationmark.svg) | -| exclamationmark_bold | ![](dist/svg/exclamationmark_bold.svg) | -| exclamationmark_circle | ![](dist/svg/exclamationmark_circle.svg) | -| exclamationmark_circle_fill | ![](dist/svg/exclamationmark_circle_fill.svg) | -| expand | ![](dist/svg/expand.svg) | -| expand_exit | ![](dist/svg/expand_exit.svg) | -| facebook | ![](dist/svg/facebook.svg) | -| file | ![](dist/svg/file.svg) | -| file_add | ![](dist/svg/file_add.svg) | -| file_add_fill | ![](dist/svg/file_add_fill.svg) | -| file_circle | ![](dist/svg/file_circle.svg) | -| file_circle_fill | ![](dist/svg/file_circle_fill.svg) | -| file_fill | ![](dist/svg/file_fill.svg) | -| filter | ![](dist/svg/filter.svg) | -| fit | ![](dist/svg/fit.svg) | -| flag_fill | ![](dist/svg/flag_fill.svg) | -| flag_ranking | ![](dist/svg/flag_ranking.svg) | -| flag_ranking_trim | ![](dist/svg/flag_ranking_trim.svg) | -| flash | ![](dist/svg/flash.svg) | -| flash_auto | ![](dist/svg/flash_auto.svg) | -| flash_off | ![](dist/svg/flash_off.svg) | -| folder | ![](dist/svg/folder.svg) | -| folder_fill | ![](dist/svg/folder_fill.svg) | -| folder_two | ![](dist/svg/folder_two.svg) | -| folder_two_fill | ![](dist/svg/folder_two_fill.svg) | -| font | ![](dist/svg/font.svg) | -| fontstyle | ![](dist/svg/fontstyle.svg) | -| game | ![](dist/svg/game.svg) | -| game_fill | ![](dist/svg/game_fill.svg) | -| game_kantan | ![](dist/svg/game_kantan.svg) | -| genre | ![](dist/svg/genre.svg) | -| genre_add | ![](dist/svg/genre_add.svg) | -| genre_done | ![](dist/svg/genre_done.svg) | -| graph_bar | ![](dist/svg/graph_bar.svg) | -| gruppo | ![](dist/svg/gruppo.svg) | -| hand_wave_fill | ![](dist/svg/hand_wave_fill.svg) | -| hatenabookmark | ![](dist/svg/hatenabookmark.svg) | -| heart | ![](dist/svg/heart.svg) | -| heart_fill | ![](dist/svg/heart_fill.svg) | -| history | ![](dist/svg/history.svg) | -| home_fill | ![](dist/svg/home_fill.svg) | -| hot | ![](dist/svg/hot.svg) | -| htmltag | ![](dist/svg/htmltag.svg) | -| image_ban_fill | ![](dist/svg/image_ban_fill.svg) | -| image_fill | ![](dist/svg/image_fill.svg) | -| image_question_fill | ![](dist/svg/image_question_fill.svg) | -| information | ![](dist/svg/information.svg) | -| instagram | ![](dist/svg/instagram.svg) | -| kaomoji | ![](dist/svg/kaomoji.svg) | -| keyboard | ![](dist/svg/keyboard.svg) | -| keyboard_fill | ![](dist/svg/keyboard_fill.svg) | -| koeblog | ![](dist/svg/koeblog.svg) | -| line_circle | ![](dist/svg/line_circle.svg) | -| line_square | ![](dist/svg/line_square.svg) | -| link | ![](dist/svg/link.svg) | -| loading | ![](dist/svg/loading.svg) | -| lock_fill | ![](dist/svg/lock_fill.svg) | -| magicwand | ![](dist/svg/magicwand.svg) | -| mail | ![](dist/svg/mail.svg) | -| mail_check | ![](dist/svg/mail_check.svg) | -| mail_circle | ![](dist/svg/mail_circle.svg) | -| mail_circle_fill | ![](dist/svg/mail_circle_fill.svg) | -| mail_fill | ![](dist/svg/mail_fill.svg) | -| menu_hamburger | ![](dist/svg/menu_hamburger.svg) | -| menu_hamburger_bold | ![](dist/svg/menu_hamburger_bold.svg) | -| menu_hamburger_fourline | ![](dist/svg/menu_hamburger_fourline.svg) | -| menu_horizotal | ![](dist/svg/menu_horizotal.svg) | -| menu_vertical | ![](dist/svg/menu_vertical.svg) | -| messageboard | ![](dist/svg/messageboard.svg) | -| microphone | ![](dist/svg/microphone.svg) | -| microphone_fill | ![](dist/svg/microphone_fill.svg) | -| movie_camera_fill | ![](dist/svg/movie_camera_fill.svg) | -| movie_play | ![](dist/svg/movie_play.svg) | -| movie_play_fill | ![](dist/svg/movie_play_fill.svg) | -| movie_stop | ![](dist/svg/movie_stop.svg) | -| music_fill | ![](dist/svg/music_fill.svg) | -| new | ![](dist/svg/new.svg) | -| news | ![](dist/svg/news.svg) | -| nice | ![](dist/svg/nice.svg) | -| nice_done | ![](dist/svg/nice_done.svg) | -| nodate | ![](dist/svg/nodate.svg) | -| now | ![](dist/svg/now.svg) | -| officialstar | ![](dist/svg/officialstar.svg) | -| officialstar_fill | ![](dist/svg/officialstar_fill.svg) | -| onedari_fill | ![](dist/svg/onedari_fill.svg) | -| open_cl | ![](dist/svg/open_cl.svg) | -| openblank | ![](dist/svg/openblank.svg) | -| openblank_fill | ![](dist/svg/openblank_fill.svg) | -| ownd | ![](dist/svg/ownd.svg) | -| palette_fill | ![](dist/svg/palette_fill.svg) | -| pause_bold | ![](dist/svg/pause_bold.svg) | -| pencil | ![](dist/svg/pencil.svg) | -| pencil_add | ![](dist/svg/pencil_add.svg) | -| pencil_bold | ![](dist/svg/pencil_bold.svg) | -| person | ![](dist/svg/person.svg) | -| person_fill | ![](dist/svg/person_fill.svg) | -| person_three_fill | ![](dist/svg/person_three_fill.svg) | -| person_two_add_fill | ![](dist/svg/person_two_add_fill.svg) | -| person_two_delete_fill | ![](dist/svg/person_two_delete_fill.svg) | -| person_two_done_fill | ![](dist/svg/person_two_done_fill.svg) | -| person_two_fill | ![](dist/svg/person_two_fill.svg) | -| peta | ![](dist/svg/peta.svg) | -| pigg | ![](dist/svg/pigg.svg) | -| play_circle | ![](dist/svg/play_circle.svg) | -| play_fill | ![](dist/svg/play_fill.svg) | -| plus | ![](dist/svg/plus.svg) | -| plus_bold | ![](dist/svg/plus_bold.svg) | -| plus_circle | ![](dist/svg/plus_circle.svg) | -| plus_circle_fill | ![](dist/svg/plus_circle_fill.svg) | -| premium_fill | ![](dist/svg/premium_fill.svg) | -| present | ![](dist/svg/present.svg) | -| profilecard | ![](dist/svg/profilecard.svg) | -| qr | ![](dist/svg/qr.svg) | -| question | ![](dist/svg/question.svg) | -| questionmark_circle | ![](dist/svg/questionmark_circle.svg) | -| questionmark_circle_fill | ![](dist/svg/questionmark_circle_fill.svg) | -| ranking_crown | ![](dist/svg/ranking_crown.svg) | -| ranking_crown_fill | ![](dist/svg/ranking_crown_fill.svg) | -| ranking_platform_fill | ![](dist/svg/ranking_platform_fill.svg) | -| reblog | ![](dist/svg/reblog.svg) | -| reblog_slash | ![](dist/svg/reblog_slash.svg) | -| refresh | ![](dist/svg/refresh.svg) | -| reply_circle_fill | ![](dist/svg/reply_circle_fill.svg) | -| reply_fill | ![](dist/svg/reply_fill.svg) | -| requ | ![](dist/svg/requ.svg) | -| sad | ![](dist/svg/sad.svg) | -| saveblog | ![](dist/svg/saveblog.svg) | -| screen_full | ![](dist/svg/screen_full.svg) | -| screen_inline | ![](dist/svg/screen_inline.svg) | -| search | ![](dist/svg/search.svg) | -| service | ![](dist/svg/service.svg) | -| setting | ![](dist/svg/setting.svg) | -| share | ![](dist/svg/share.svg) | -| shine_fill | ![](dist/svg/shine_fill.svg) | -| sideface_close | ![](dist/svg/sideface_close.svg) | -| sideface_open | ![](dist/svg/sideface_open.svg) | -| smartphone | ![](dist/svg/smartphone.svg) | -| smartphone_fill | ![](dist/svg/smartphone_fill.svg) | -| sort | ![](dist/svg/sort.svg) | -| sort_feed | ![](dist/svg/sort_feed.svg) | -| sort_tile | ![](dist/svg/sort_tile.svg) | -| speaker_off_fill | ![](dist/svg/speaker_off_fill.svg) | -| speaker_on_fill | ![](dist/svg/speaker_on_fill.svg) | -| sprout | ![](dist/svg/sprout.svg) | -| stampside | ![](dist/svg/stampside.svg) | -| star | ![](dist/svg/star.svg) | -| star_circle_fill | ![](dist/svg/star_circle_fill.svg) | -| star_face_fill | ![](dist/svg/star_face_fill.svg) | -| star_fill | ![](dist/svg/star_fill.svg) | -| stop_fill | ![](dist/svg/stop_fill.svg) | -| switching | ![](dist/svg/switching.svg) | -| switching_camera | ![](dist/svg/switching_camera.svg) | -| tag_fill | ![](dist/svg/tag_fill.svg) | -| tag_official_fill | ![](dist/svg/tag_official_fill.svg) | -| topblogger_ribbon | ![](dist/svg/topblogger_ribbon.svg) | -| transcript_off | ![](dist/svg/transcript_off.svg) | -| transcript_on | ![](dist/svg/transcript_on.svg) | -| transmission | ![](dist/svg/transmission.svg) | -| trashcan | ![](dist/svg/trashcan.svg) | -| trend | ![](dist/svg/trend.svg) | -| trend_fill | ![](dist/svg/trend_fill.svg) | -| triangle_down | ![](dist/svg/triangle_down.svg) | -| triangle_left | ![](dist/svg/triangle_left.svg) | -| triangle_right | ![](dist/svg/triangle_right.svg) | -| triangle_up | ![](dist/svg/triangle_up.svg) | -| trianglearrow_down | ![](dist/svg/trianglearrow_down.svg) | -| trianglearrow_downright | ![](dist/svg/trianglearrow_downright.svg) | -| trianglearrow_right | ![](dist/svg/trianglearrow_right.svg) | -| trianglearrow_up | ![](dist/svg/trianglearrow_up.svg) | -| trianglearrow_upright | ![](dist/svg/trianglearrow_upright.svg) | -| triangleend_left | ![](dist/svg/triangleend_left.svg) | -| triangleend_right | ![](dist/svg/triangleend_right.svg) | -| trophy_fill | ![](dist/svg/trophy_fill.svg) | -| tv_fill | ![](dist/svg/tv_fill.svg) | -| twitter | ![](dist/svg/twitter.svg) | -| webview | ![](dist/svg/webview.svg) | -| youtube | ![](dist/svg/youtube.svg) | diff --git a/packages/spindle-icons/scripts/icon-doc.ts b/packages/spindle-icons/scripts/icon-doc.ts index a5b45191c..d437aa3c6 100644 --- a/packages/spindle-icons/scripts/icon-doc.ts +++ b/packages/spindle-icons/scripts/icon-doc.ts @@ -1,11 +1,14 @@ import { promises as fs } from 'fs'; +import { relative } from 'path'; +const DOC_DIR = 'docs'; const SVG_DIR = 'dist/svg'; const markdown = (files: string[]): string => { + const svgPath = relative(DOC_DIR, SVG_DIR); const icons = files.map((file) => { const name = file.replace('.svg', ''); - return [`| ${name} | ![](${SVG_DIR}/${file}) |`].join(''); + return `| ${name} | ![](${svgPath}/${file}) |`; }); const iconMarkdown = [ '## Icon List', @@ -22,7 +25,7 @@ const createIconList = async (): Promise => { const icons = files .filter((file) => file.endsWith('.svg')) .filter((file) => !file.startsWith('sprite')); - fs.writeFile('icons.md', markdown(icons)); + await fs.writeFile(`${DOC_DIR}/icons.md`, markdown(icons)); return Promise.resolve(); } catch (err) { return Promise.reject(err); diff --git a/packages/spindle-ui/README.md b/packages/spindle-ui/README.md index 7dd9a9495..b952a3daf 100644 --- a/packages/spindle-ui/README.md +++ b/packages/spindle-ui/README.md @@ -1,10 +1,52 @@ # Spindle UI (In development) -- [Design Doc](design-doc.md) +React Components with Spindle (Ameba Design System) -## 開発する +> Spindle UIは試験開発中のため、大幅に変更される可能性があります。安定版リリースまでの間はバージョン番号は0となり、バージョンに関わらずbreaking changeが行われることがありますので、利用時には注意してください。変更内容は、[CHANGELOG](CHANGELOG.md)に記載されています。 + +![MIT licence](https://img.shields.io/npm/l/@openameba/spindle-ui) ![npm](https://img.shields.io/npm/v/@openameba/spindle-ui) + +## インストール +``` +npm install @openameba/spindle-ui +``` +``` +yarn add @openameba/spindle-ui +``` + +## 利用方法 + +```JavaScript +import { Clock } from '@openameba/spindle-ui/Icon'; + +export function SomeButton() { + return +} +``` + +利用できるコンポーネントは、[Storybook](https://ameba-spindle.web.app/)で確認できます。 + +また、Spindle UIのスタイルはCSSファイルとして提供されています。スタイルを適用するには、HTMLからCSSを読み込むか、各ファイルからCSSを読み込みビルドする必要があります。詳細は[Design Doc](docs/design-doc.md)に記載されています。なお、スタイルの提供方法は実際の利用パターンに応じて変更される可能性があります。 + +```html + + +``` + +```css +/* PostCSSなどで個別にスタイルを読み込む例 */ +@import 'node_modules/@openameba/spindle-ui/Form/Checkbox.css'; +``` + +## 開発方法 ``` yarn install yarn dev # storybookが起動します ``` + +## ライセンス +Spindle IconsはMITライセンスで公開されています。ただし、アイコンは[Spindle Icons](../spindle-icons/)に準じて、Creative Commons BY-NC-ND 4.0ライセンスで公開されています。 + +## 関連ドキュメント +- [Design Doc](docs/design-doc.md) diff --git a/packages/spindle-ui/design-doc.md b/packages/spindle-ui/docs/design-doc.md similarity index 100% rename from packages/spindle-ui/design-doc.md rename to packages/spindle-ui/docs/design-doc.md