<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 月アイコンを定義 -->
    <symbol id="icon_moon" viewBox="0 0 24 24">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
    </symbol>
    
    <!-- 星アイコンを定義 -->
    <symbol id="icon_star" viewBox="0 0 24 24">
      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
    </symbol>
  <defs>
</svg>

<!-- 月アイコン呼び出し -->
<div class="icon_moon--wrap">
  <svg class="-primary">
    <use href="#icon_moon"></use>
  </svg>
  <svg class="-red">
    <use href="#icon_moon"></use>
  </svg>
  <svg class="-blue">
    <use href="#icon_moon"></use>
  </svg>
</div>

<!-- 星アイコン呼び出し -->
<div class="icon_star--wrap">
  <svg class="-primary">
    <use xlink:href="#icon_star"></use>
  </svg>
  <svg class="-red">
    <use xlink:href="#icon_star"></use>
  </svg>
  <svg class="-blue">
    <use xlink:href="#icon_star"></use>
  </svg>
</div>

    
<!-- ▼▼月アイコン元コード▼▼
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-->

<!-- ▼▼星アイコン元コード▼▼
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-->
/* ======================
各アイコンの属性をCSSに記述
======================*/
#icon_moon {
  fill: none;
  stroke-width: 2;
  stroke: currentColor; /* colorプロパティで色指定できるようになる */
  stroke-linecap: round;
  stroke-linejoin: round;
}

#icon_star {
  fill: currentColor; /* colorプロパティで色指定できるようになる */
}

/* ======================
個別に色・サイズを指定
======================*/
.-primary {
  width: 24px;
  aspect-ratio: 1;
}

.-red {
  color: red;
  width: 32px;
  aspect-ratio: 1;
}

.-blue {
  color: blue;
  width: 48px;
  aspect-ratio: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.