图标文本对齐示例 SVG icon system alignme

SVG 图标与文字基线对齐 大小对齐 H1到H6示例

• html部分

<h1>
  64px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <path id="icon-info" d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z">
      </path>
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <path id="icon-open" d="M38 38H10V10h14V6H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V24h-4v14zM28 6v4h7.17L15.51 29.66l2.83 2.83L38 12.83V20h4V6H28z"/>
    </svg>
  </div>
</h1>
<h2>
  48px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <use xlink:href="#icon-info">
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <use xlink:href="#icon-open">
    </svg>
  </div>
</h2>
<h3>
  32px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <use xlink:href="#icon-info">
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <use xlink:href="#icon-open">
    </svg>
  </div>
</h3>
<h4>
  24px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <use xlink:href="#icon-info">
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <use xlink:href="#icon-open">
    </svg>
  </div>
</h4>
<h5>
  16px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <use xlink:href="#icon-info">
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <use xlink:href="#icon-open">
    </svg>
  </div>
</h5>
<h6>
  12px ABC
  <div class="svg-icon svg-baseline">
    <svg width="48" height="48" viewBox="0 0 48 48">
       <use xlink:href="#icon-info">
    </svg>
  </div>
  xyz
  <div class="svg-icon svg-baseline">
    <svg xmlns="https://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
      <use xlink:href="#icon-open">
    </svg>
  </div>
</h6>

• css部分

.svg-icon {
    display: inline-flex;
    align-self: center;
    position: relative;
    height: 1em;
    width: 1em;
}
.svg-icon svg {
    height: 1em;
    width: 1em;
}
.svg-icon.svg-baseline svg {
    bottom: -0.125em;
    position: absolute;
}
/*-----------------*/
/*-----------------*/
/*-----------------*/
/*PROTOTYPE EXAMPLE*/

body {
    padding: 8px;
    font-size: 16px;
    font-family: arial;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 1;
    font-weight: normal;
    position: relative;
}
/*H Tag Sizing*/

h1 {
    font-size: 64px;
}
h2 {
    font-size: 48px;
}
h3 {
    font-size: 32px;
}
h4 {
    font-size: 24px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 12px;
}
p {
    margin-top: 0;
    margin-bottom: 8px;
}
/*Red Lining*/

h1:after,
h2:after,
h3:after,
h4:after,
h5:after,
h6:after {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: .145833em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    top: .27em;
    left: 0;
    background-color: rgba(255, 0, 0, 0.23);
    z-index: -100;
}

• 效果图

  
  20200722200552848.png

原文: SVG icon system alignment