Microsoft 関連の Icon を Adaptive Card で使えないか調べてみたら CodePen で Icon URL 探すの便利だなと感じた記録

# 背景
Teams で Adaptive Card を利用する際にやっぱりアイコンあったほうがいいなと思い調べてみた

こんな感じのイメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/4ead2a66-6925-241b-3606-c1af808e44c1.png)

色々アイコンページがあったので備忘録として下部にリンク貼っておく

# すぐに Icon リンクが欲しい場合は以下から取得
codepen で、アプリ名、サイズでループさせて表示させられたら有るね！ってことでリンクを利用する。

https://codepen.io/bnjbvyvw-the-sasster/pen/jOXGaoK

:::note info
Power Automate で Adaptive Card で Teams に送付する際は、SVG は使えないっぽいので PNG を利用
:::

:::note info 
Power Platform 系のアイコンURLも若干追加
:::




# 結論

## リンクで使う場合
Fluent UI や Office Top の Icon Link を取得すればよさげ

https://developer.microsoft.com/en-us/fluentui#/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b596a45f-a817-efcd-9b2e-7cbf361a81a9.png)

https://www.office.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/0f8c4b08-ab9e-bb0b-5ec4-0333257b2bba.png)


~~この辺りに記載があるけど、Contents List があれば楽なんですが。~~
Fluent Icon の URL と size を一覧化してくれてるサイト

https://codepen.io/kriede/pen/xxbbNVo

ただ、最新っぽくなかったので改造したのがこちら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/c8dfa4b5-7e91-5326-23f2-00787a57d935.png)

https://codepen.io/baku2san/pen/KKQWjoO

### 画像URL取得方法
[codepen](https://codepen.io/baku2san/pen/KKQWjoO) を開いて、欲しい画像のURL取得するだけ

ここに右クリックメニューでのコピーを追加したほうがマシかと

こんな感じで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/10fef04a-f52b-a321-c875-e10e25286902.png)


### 画像URL説明
アプリ一覧
> ['outlook', 'onedrive', 'word', 'excel', 'powerpoint', 'onenote', 'sharepoint', 'teams', 'office', 'access', 'delve', 'infopath', 'project', 'sway', 'visio', 'yammer']

以下の URL に 上記アプリ名入れて、対応するサイズを追加してるだけ。
```url:svg
https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/${app}_${size}x1.svg
```

```url:png
https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/png/${app}_${size}x1.png
```

Office de

https://docs.microsoft.com/ja-jp/office/dev/add-ins/design/fabric-core

Do/Don't の記載もないけど、商用とかに使う場合はちゃんとライセンス条項とか調べてくださいな

https://docs.microsoft.com/en-us/javascript/api/overviews/iconoverview?view=office-ui-fabric-react-latest

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/ab53ecf8-d110-4a94-4de5-8a4efa30ad46.png)

## ダウンロードして使う場合
### Office365
fasttrack へログイン（開発者ライセンスでもログイン可能）

https://fasttrack.microsoft.com/v2/ja-jp/resources#0

ガイドラインを読んで、ブランドツールキットをダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/1cd6d05e-6623-585a-7409-348bcc038d81.png)

解凍すると、複数サイズが存在するので、ライセンス条項に従って利用可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/45eafd73-2343-4897-ae1d-07bad20c341c.png)

:::note warn
以下は、それぞれのページに利用条件等あるので確認して使いましょう
:::

### Microsoft 365 アーキテクチャのテンプレートとアイコン
https://docs.microsoft.com/ja-JP/microsoft-365/solutions/architecture-icons-templates?view=o365-worldwide

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/6f827b3d-7b7c-6480-f2f0-01b61db82e1d.png)


### Azure アーキテクチャ アイコン
https://docs.microsoft.com/ja-jp/azure/architecture/icons/#icon-terms

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/58f751e1-cdb8-76d3-82f6-b6fb67389417.png)

### Microsoft Dynamics 365 アイコン
https://docs.microsoft.com/ja-JP/dynamics365/get-started/icons

### Microsoft Power Platform アイコン
https://docs.microsoft.com/ja-JP/power-platform/guidance/icons


# 参考
Teams の Emoticons なら以下で

https://qiita.com/baku2san/items/db24e2cd8760a6c88542

# あとがき
Office Icon には日付が入ってるんですが、入ってる方が新しそうなのが不思議・・

Teams Icon @ Office
<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_20x1.svg" width="20"> 
Teams Icon @ Fluent UI
<img src="https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/svg/teams_48x1.svg" width="48"> 


でもって、ファイル名の Icon Size らしきものを編集すれば色々取れそう
Office Icon での例 16/20/24/32/48 はとりあえず取れた

<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_16x1.svg" width="16"> 
<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_20x1.svg" width="20"> 
<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_24x1.svg" width="24"> 
<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_32x1.svg" width="32"> 
<img src="https://static2.sharepointonline.com/files/fabric-cdn-prod_20210930.001/assets/brand-icons/product/svg/teams_48x1.svg" width="48">