icon的使用

css设置icon

1.src => assets => svg目录下放入icon
2.index.vue => 引入aside-homeicon

<i class="icon icon-aside-home icon-size-21"></i>

3.styles新建icon.scss => 获取class为icon的样式

i[class^=icon] {
display: inline-block;
background-repeat: no-repeat;
background-position: 00;
}
.svg-class {
width: 1em;
height: 1em;
fill: currentColor;
}
/* svg 图标尺寸 */
.aside-svg {
margin-bottom: -4px;
margin-right: 3px;
font-size: 20px;
}
.header-menu-svg {
margin: 08px-2px0;
color: #ccc;
font-size: 20px;
vertical-align: top;
}
/* png图标尺寸 */
.icon-size-21 { width: 21px; height: 21px; }
.icon-size-30 { width: 30px; height: 30px; }
/* 偏移*/
.mb--5 { margin-bottom: -5px; }
/* 图标 */
.icon-aside-home { background-image: url("~@/assets/svg/aside-home.png"); }

SVG设置Icon

安装

npm i -D svg-sprite-loader

svg-sprite-loader 将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通过 复用

配置

• vue.config.js

// svg
chainWebpack: (config) => {
// 它可以提高第一屏的速度，建议开启预加载
config.plugin('preload').tap(() => [
 {
rel:'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include:'initial'
 }
 ])
// 当页面太多时，会导致太多无意义的请求
config.plugins.delete('prefetch')
// 设置 svg-sprite-loader
config.module.rules.delete('svg') //重点:删除默认配置中处理svg,
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
 .rule('icons')
 .test(/\.svg$/)
 .include.add(resolve('src/icons'))
 .end()
 .use('svg-sprite-loader')
 .loader('svg-sprite-loader')
 .options({
symbolId:'icon-[name]'
 })
 .end()
 }

• components=>Svgicon=>index.vue

<template>
  <svgclass="svg-class" :class="className">
  <use :href="'#icon-' + iconName"></use>
  </svg>
</template>
<script>
exportdefault {
  name:'SvgIcon',
  props: {
    iconName: {
      type:String,
      default:''
    },
    className: {
      type:String,
      default:''
    }
  },
  setup() {}
  }
</script>

• icons => index.js

// 获取当前svg目录所有为.svg结尾的文件
constreq = require.context('./svg', false, /\.svg$/)
// 解析获取的.svg文件的文件名称，并返回
constrequireAll = (requireContext) =>requireContext.keys().map(requireContext)
requireAll(req)

• main.js

// svg全局组件
importSvgIconfrom'@/components/Svgicon'
// svg文件解析
import'@/icons'
app.component('svg-icon', SvgIcon)

• 页面使用

<svg-icon :iconName="menu.meta && menu.meta.icon" className="aside-svg"></svg-icon>