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

一、将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
  }
}