## 事象
`.ts`や`.vue`ファイルでimportしているしていないに関わらず、[[xicons]](vicons)をインストールしているプロジェクトで[[インテリセンス]]が遅くなる。大体5秒弱ぐらいのラグ。
`package.json`の[[xicons]]に関する依存は以下のとおり。
```json
{
"dependencies": {
"@vicons/fa": "^0.12.0",
},
"devDependencies": {
"@vicons/carbon": "^0.12.0",
"@vicons/fluent": "^0.12.0",
"@vicons/ionicons5": "^0.12.0",
"@vicons/tabler": "^0.12.0",
}
}
```
## 原因
`@vicons`配下に大量の`.js` `.d.ts` ファイルがあるためと思われる。
```console
$ dust -d 1
33M ┌── ionicons5
37M ├── tabler
40M ├── fa
47M ├── carbon
253M ├── fluent
411M ┌─┴ .
$ ls | while read f; do echo $f; ls -l $f | wc -l; done | xargs -L2
carbon 3805
fa 3227
fluent 20149
ionicons5 2673
tabler 3045
```
## 解決方法
svgだけのvueファイルを[[xicons]]の[[SVG]]コピーで作成し、それを使う。
`CenterSquare.vue`
```html
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<path d="M6 12H4V4h8v2H6v6z" fill="currentColor"></path>
<path d="M28 12h-2V6h-6V4h8v8z" fill="currentColor"></path>
<path d="M12 28H4v-8h2v6h6v2z" fill="currentColor"></path>
<path d="M28 28h-8v-2h6v-6h2v8z" fill="currentColor"></path>
<path d="M15 10h2v4h-2z" fill="currentColor"></path>
<path d="M10 15h4v2h-4z" fill="currentColor"></path>
<path d="M18 15h4v2h-4z" fill="currentColor"></path>
<path d="M15 18h2v4h-2z" fill="currentColor"></path>
</svg>
</template>
```
以下のように`n-icon`に挟む形で利用すれば、サイズ変更などは適応される。
```html
<template>
<n-icon size="24"><CenterSquare /></n-icon>
</template>
```