Vue：将自制的icon打包成文件，使用的时候直接用class即可；以及直接使用icon文件

本文链接：https://blog.youkuaiyun.com/qq_37899622/article/details/121335027

这篇博客介绍了如何在项目中管理和使用图标资源。首先，将图标存放在一个文件夹，并创建一个CSS文件来设置背景图片。接着，在main.js中引入CSS文件。在实际使用中，可以将图标应用到按钮和输入框的内联图标中，同时提供了通过CSS和直接使用图片两种方式。此外，还展示了在组件中作为`prepend-inner-icon`的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、将icon存放在一个文件夹中，再写一个css文件
在这里插入图片描述

.components-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.components-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.components-icon:before {
  content: "\00a0";
}

.components-search {
  background-image: url(../icons/icon_search@3x.png);
}
.components-filter {
  background-image: url(../icons/icon_filter_tag@2x.png);
}

二、在main.js中引入css文件
在这里插入图片描述

import '@/assets/css/components-icon.css'

三、使用
在这里插入图片描述

<div style="height: 60px; text-align: center; padding: 20px;">
  <v-btn color="#5C82E3" dark text icon>
    <v-icon>close</v-icon>
  </v-btn>
  <v-btn color="#5C82E3" dark text icon>
    <v-icon class="components-icon components-search" style="height: 24px;"></v-icon>
  </v-btn>
  <v-btn color="#5C82E3" dark text icon>
    <v-icon class="components-icon components-filter" style="height: 24px;"></v-icon>
  </v-btn>
</div>

在这里插入图片描述

四、除了单独使用，还可以用在组件中，如：作为prepend-inner-icon使用

<v-text-field
  flat
  solo-inverted
  label="Search the notes"
  prepend-inner-icon="components-icon components-search"
  v-on:keyup.enter="searchNote"
  class="search-field"
  v-model="searchKey"
  hide-details
  color="#5C82E3"
></v-text-field>

在这里插入图片描述

五、不通过css，也可以直接使用图片文件
在这里插入图片描述

<v-btn icon small @click="searchNote" color="#3F4360">
  <img
    :src="computeRefreshLogo"
    alt="Refresh"
    style="height: 24px !important;"
  />
</v-btn>

import refreshImg from '@/assets/icons/icon_refresh@3x.png'

computed: {
  computeRefreshLogo () {
    return refreshImg
  }
}

在这里插入图片描述