author: 🐘@onopko on
fill="currentColor"
を適用する。
<symbol>
として定義する。
id
は重複しないようにする。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="symbol" viewBox="0 0 512 512"> <path fill="currentColor" d="M512 113.2c-18.8 8.4-39.1 14-60.3 16.5 21.7-13 38.3-33.6 46.2-58.1-20.3 12-42.8 20.8-66.7 25.5-19.2-20.4-46.5-33.1-76.7-33.1-58 0-105 47-105 105 0 8.2 0.9 16.2 2.7 23.9-87.3-4.4-164.7-46.2-216.5-109.8-9 15.5-14.2 33.6-14.2 52.8 0 36.4 18.5 68.6 46.7 87.4-17.2-0.5-33.4-5.3-47.6-13.1 0 0.4 0 0.9 0 1.3 0 50.9 36.2 93.4 84.3 103-8.8 2.4-18.1 3.7-27.7 3.7-6.8 0-13.3-0.7-19.8-1.9 13.4 41.7 52.2 72.1 98.1 73-36 28.2-81.2 45-130.5 45-8.5 0-16.8-0.5-25.1-1.5 46.6 29.9 101.8 47.2 161.1 47.2 193.2 0 298.9-160.1 298.9-298.9 0-4.6-0.1-9.1-0.3-13.6 20.5-14.7 38.3-33.2 52.4-54.3z"></path> </symbol> </defs> </svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="symbol" viewBox="0 0 512 512"> <circle fill="currentColor" class="face" cx="256" cy="256" r="256"/> <path fill="#FD4B92" class="mouse" d="M256,299.4c58,0,113.1-15.4,160-42.5C408.7,346.1,339.4,416,256,416c-83.4,0-152.7-69.9-160-159.2C142.9,283.9,198,299.4,256,299.4L256,299.4z"/> <ellipse fill="#000000" class="eye" cx="160" cy="176" rx="32" ry="48"/> <ellipse fill="#000000" class="eye" cx="352" cy="176" rx="32" ry="48"/> </symbol> </defs> </svg>
<p> <svg> <use xlink:href="twitter.svg#symbol" /> </svg> <svg> <use xlink:href="happy.svg#symbol" /> </svg> </p>
color
を指定するとSVG内の currentColor
に適用される。
p { color: #1c9bf0; } p:hover { color: #4fc3f7; }
p { color: #fdd835; } p:hover { color: #fff176; }
p { color: #8bc34a; } p:hover { color: #c5e1a5; }
FYI: SVGのアイコンをWebフォントにする(IcoMoonの使い方) | 125naroom /デザインするところ(会社)です。
Copyright © Takehiko Ono. All Rights Reserved.