[[Svelte]]、[[TypeScript]]構成で[[Vite]]を使った場合。
## インストール
```console
npm i -D carbon-components-svelte
```
[[carbon-preprocess-svelte]]もインストール。
```console
npm i -D carbon-preprocess-svelte
```
## 設定
`main.ts`で[[CSS]]をimportする。
```ts:main.ts
import "carbon-components-svelte/css/white.css";
```
`svelte.config.js`の`preprocess`をリストにして、`optimizeImports()`と`elements()`を追加。
```diff:svelte.config.js
import sveltePreprocess from "svelte-preprocess";
+ import { optimizeImports, elements } from "carbon-preprocess-svelte";
export default {
- preprocess: sveltePreprocess()],
+ preprocess: [sveltePreprocess(), optimizeImports(), elements()],
};
```
> [!warning]
> `optimizeImports()`を追加しないと、[[Carbon Components Svelte]]や[[carbon-icons-svelte]]の全packageがブラウザで読み込まれてしまい、データ量とロード時間が大変なことになる。これは[[ESモジュール (JavaScript)|ESモジュール]]のimport方式を使っているためと思われる。
> [!error]- [[TypeScript]]の文法がエラーになる場合
> preprocessの指定順によっては問題になるかも。
>
> [Unexpected Token Error when importing types · Issue \#28 · carbon\-design\-system/carbon\-preprocess\-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte/issues/28)
>
> また、`icons()`を指定するとなぜか[[TypeScript]]構文を解析できないので注意。
> [!info]
> `svelte.config.js`がない構成の場合は、[carbon\-components\-svelte/examples/vite at master · carbon\-design\-system/carbon\-components\-svelte](https://github.com/carbon-design-system/carbon-components-svelte/tree/master/examples/vite) が参考になるかもしれない。
## アイコン
別途、[[carbon-icons-svelte]]が必要。
```console
npm i -D carbon-icons-svelte
```
一覧は[[Carbon Design System icons]]を参照。
## 感想
[[Svelte Material UI]]と比較した感想。期待以上に優れた開発体験が気に入った。
- ==templateの補完や自動importが効くのが神== ([[IntelliJ IDEA]]の場合)
- [[Svelte Material UI]]は補完が一切効かなかったのでコピペが必要
- コード量が少なく、シンプルで直感的
- [[Svelte Material UI]]と比べて20%～50%くらいのサイズになる
- 逆に[[Svelte Material UI]]みたいなInnerタグは存在しない
- コンポーネントの種類が豊富
- 機能面ではほぼ困らない
- デザインは今風とは言い難くクセはある
- 良くも悪くも[[IBM]]臭がスゴイ
- レイアウトは自分達で調整が必要 (に感じる)
> [!caution]
> ドキュメントをすべて読んだわけではないため、情報の正確性は保証しない。
## 参考
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" />
<span class="link-card-v2-site-name">GitHub</span>
</div>
<div class="link-card-v2-title">
carbon-components-svelte/examples/vite at master · carbon-design-system/carbon-components-svelte
</div>
<div class="link-card-v2-content">
Svelte implementation of the Carbon Design System. Contribute to carbon-design-system/carbon-components-svelte d ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/4038d9059e41c650f84ba66b57f3f8a820b2278212681b466da3d1d9125d9437/carbon-design-system/carbon-components-svelte" />
<a href="https://github.com/carbon-design-system/carbon-components-svelte/tree/master/examples/vite"></a>
</div>