@charcoal-ui/icons 6.0.0-beta.1 → 6.0.0-beta.2

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.
Files changed (30) hide show
  1. package/README.md +6 -5
  2. package/css/icon.css +44 -0
  3. package/css/v1/index.css +10 -0
  4. package/css/v1/index.html +9 -0
  5. package/css/v1/index.story.tsx +10 -1
  6. package/dist/index.cjs +58 -27
  7. package/dist/index.cjs.map +1 -1
  8. package/dist/index.d.cts +34 -4
  9. package/dist/index.d.cts.map +1 -1
  10. package/dist/index.d.ts +34 -4
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +58 -28
  13. package/dist/index.js.map +1 -1
  14. package/package.json +2 -2
  15. package/react/v1/16/Description.d.ts +4 -0
  16. package/react/v1/16/Description.d.ts.map +1 -0
  17. package/react/v1/16/Description.js +5 -0
  18. package/react/v1/index.d.ts +1 -0
  19. package/react/v1/index.d.ts.map +1 -1
  20. package/react/v1/index.js +1 -0
  21. package/src/PixivIcon.story.tsx +33 -2
  22. package/src/PixivIcon.test.tsx +215 -52
  23. package/src/PixivIcon.ts +38 -55
  24. package/src/README.mdx +7 -2
  25. package/src/SSR.mdx +127 -43
  26. package/src/calcActualSize.ts +115 -0
  27. package/src/index.ts +1 -0
  28. package/src/react/v1/16/Description.tsx +28 -0
  29. package/src/react/v1/index.story.tsx +6 -0
  30. package/src/react/v1/index.tsx +1 -0
package/README.md CHANGED
@@ -35,11 +35,12 @@ TypeScript の型定義がグローバルにインストールされるので、
35
35
  <pixiv-icon name="16/Add" scale="1"></pixiv-icon>
36
36
  ```
37
37
 
38
- | 属性名 | 型 | 説明 |
39
- | ------------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
40
- | **name** | String | アイコンの名前です。`${size}/${filename}` という形式をしています。利用できる名前の一覧はリポジトリの `packages/icons/svg` 以下を見てください。 |
41
- | **scale** | Number `1 or 2 or 3` | アイコンの拡大率を倍率で指定します。拡大は `24/〇〇` 系のアイコンでのみサポートされます。 |
42
- | **unsafe-non-guideline-scale** | Number | ガイドラインに従わない倍率を無理やり指定する場合に使います。 |
38
+ | 属性名 | 型 | 説明 |
39
+ | ------------------------------ | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
40
+ | **name** | String | アイコンの名前です。`${size}/${filename}` という形式をしています。利用できる名前の一覧はリポジトリの `packages/icons/svg` 以下を見てください。 |
41
+ | **scale** | Number `1 or 2 or 3` | アイコンの拡大率を倍率で指定します。拡大は `24/〇〇` 系のアイコンでのみサポートされます。 |
42
+ | **fixed-size** | Number | ガイドライン外のサイズで描画したいときに、px の数値で固定サイズを指定します。他のサイズ指定 (`scale` / `unsafe-non-guideline-scale`) よりも常に優先されます。SSR 時の CLS を防ぐため、vanilla HTML では `style="--charcoal-icon-size: Npx"` も併記してください (React の `<Icon fixedSize>` 経由なら自動)。 |
43
+ | **unsafe-non-guideline-scale** | Number | **(非推奨: `fixed-size` を使ってください)** ガイドラインに従わない倍率を無理やり指定する場合に使います。`fixed-size` 同様、CSS-only ではサイズを決定できないため、`style="--charcoal-icon-size: Npx"` の併記が必要です。 |
43
44
 
44
45
  ### 独自のアイコンを登録する
45
46
 
package/css/icon.css ADDED
@@ -0,0 +1,44 @@
1
+ .charcoal-icon {
2
+ display: inline-flex;
3
+ width: var(--charcoal-icon-size);
4
+ height: var(--charcoal-icon-size);
5
+ }
6
+
7
+ pixiv-icon:not(:defined) {
8
+ --pixiv-icon-base: 24px;
9
+ --pixiv-icon-scale: 1;
10
+ --pixiv-icon-size: calc(var(--pixiv-icon-base) * var(--pixiv-icon-scale));
11
+
12
+ display: inline-flex;
13
+ /* --charcoal-icon-size がセットされていればそれを優先、
14
+ なければ name / scale から導出した --pixiv-icon-size をフォールバック */
15
+ width: var(--charcoal-icon-size, var(--pixiv-icon-size));
16
+ height: var(--charcoal-icon-size, var(--pixiv-icon-size));
17
+
18
+ &[name^='16/'] {
19
+ --pixiv-icon-base: 16px;
20
+ --pixiv-icon-size: 16px;
21
+ }
22
+
23
+ &[name^='24/'] {
24
+ &[scale='2'] {
25
+ --pixiv-icon-scale: 2;
26
+ }
27
+ &[scale='3'] {
28
+ --pixiv-icon-scale: 3;
29
+ }
30
+ }
31
+
32
+ &[name^='32/'] {
33
+ --pixiv-icon-base: 32px;
34
+ --pixiv-icon-size: 32px;
35
+ }
36
+
37
+ &[name^='Inline/'] {
38
+ --pixiv-icon-base: 16px;
39
+
40
+ &[scale='2'] {
41
+ --pixiv-icon-scale: 2;
42
+ }
43
+ }
44
+ }
package/css/v1/index.css CHANGED
@@ -658,6 +658,16 @@
658
658
  aspect-ratio: 1/1;
659
659
  }
660
660
 
661
+ .charcoal-icon-v1-description-16 {
662
+ display: inline-block;
663
+ width: 1em;
664
+ height: 1em;
665
+ mask-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.707%205.207a1%201%200%2001.293.707V12a2%202%200%2001-2%202H5a2%202%200%2001-2-2V4a2%202%200%20012-2h4.086a1%201%200%2001.707.293l2.914%202.914zM6%2010a.5.5%200%20000%201h4a.5.5%200%20000-1H6zm0-2a.5.5%200%20000%201h4a.5.5%200%20000-1H6zm2.5-2.5a1%201%200%20001%201H12L8.5%203v2.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
666
+ mask-size: 100% 100%;
667
+ background: currentColor;
668
+ aspect-ratio: 1/1;
669
+ }
670
+
661
671
  .charcoal-icon-v1-devicerotation {
662
672
  display: inline-block;
663
673
  width: 1em;
package/css/v1/index.html CHANGED
@@ -611,6 +611,15 @@
611
611
  <code>.charcoal-icon-v1-description</code>
612
612
  </div>
613
613
 
614
+ <div>
615
+ <div
616
+ class="charcoal-icon-v1-description-16"
617
+ aria-label=".charcoal-icon-v1-description-16"
618
+ role="img"
619
+ ></div>
620
+ <code>.charcoal-icon-v1-description-16</code>
621
+ </div>
622
+
614
623
  <div>
615
624
  <div
616
625
  class="charcoal-icon-v1-devicerotation"