前端引用图片再也不发愁

使用mask

• 支持svg整体变色
• 支持定义尺寸

<div
  style="mask: url('./test.svg') no-repeat center center; mask-size: contain; width: 10px; height: 10px; background-color: green;">
</div>

使用img

• 可以规定大小
• 可以填充

<img src="/src/assets/1.png" alt="文字描述" width="16" height="16">

使用background

• 变不了颜色 除非使用filter
• 可以设置大小
• 可以设置填充

    <div
      style="
        background: url('./test.svg') no-repeat center center;
      /*  保持原本 */
        background-size: contain;
      /* 可直接使用像素定义宽高 */
      /* background-size: 70px 80px */
    
      /* 重复平铺 */
        background-repeat: no-repeat; 
        width: 10px;
        height: 10px;
        /* background-color: green; */
      "
    ></div>

如果是字体图标

字体图标文件： .woff,.ttf

使用 i class 进行引入

<i class="my-icon">&#xe001;</i>

如果是data uri

url可以引入图片

引入 data uri ...

.my-icon {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z' fill='%23333333'/%3E%3C/svg%3E");
  width: 24px;
  height: 24px;
  display: inline-block;