手摸手，带你优雅的使用 icon

客官°小女子只卖身不卖艺 2022-11-24 12:57 241阅读 0赞

这是花裤衩在掘金上发布的关于这个优雅的使用icon的过程
这是关于如何自己封装一个组件上传npm库

久在vue后台管理系统混迹的童鞋应该知道花裤衩的吧，我用了他的vue-admin-template模板，顺便学习了一下大佬的代码，里面有一个使用svg-icon的组件，认真看了下，因为我一般用的都是阿里爸爸iconfont官方的那种使用方式，都知道的，看人家模板是怎么用的，原理去大佬掘金的文章上看：
首先写一个svg-icon组件：

  1. <template>
  2.   <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  3.   <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
  4.     <use :xlink:href="iconName" />
  5.   </svg>
  6. </template>
  8. <script>
  9. // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  10. //  isExternal 是一个正则检验 return /^(https?:|mailto:|tel:)/.test(path)
  11. import { isExternal } from '@/utils/validate'
  13. export default {
  14.   name: 'SvgIcon',
  15.   props: {
  16.     iconClass: {
  17.       type: String,
  18.       required: true
  19.     },
  20.     className: {
  21.       type: String,
  22.       default: ''
  23.     }
  24.   },
  25.   computed: {
  26.     isExternal() {
  27.       return isExternal(this.iconClass)
  28.     },
  29.     iconName() {
  30.       return `#icon-${this.iconClass}`
  31.     },
  32.     svgClass() {
  33.       if (this.className) {
  34.         return 'svg-icon ' + this.className
  35.       } else {
  36.         return 'svg-icon'
  37.       }
  38.     },
  39.     styleExternalIcon() {
  40.       return {
  41.         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
  42.         '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
  43.       }
  44.     }
  45.   }
  46. }
  47. </script>
  49. <style scoped>
  50. .svg-icon {
  51.   width: 1em;
  52.   height: 1em;
  53.   vertical-align: -0.15em;
  54.   fill: currentColor;
  55.   overflow: hidden;
  56. }
  58. .svg-external-icon {
  59.   background-color: currentColor;
  60.   mask-size: cover!important;
  61.   display: inline-block;
  62. }
  63. </style>

然后在阿里巴巴iconfont下载你需要的icon格式为svg，存在一个文件夹下，然后写一个js文件注册这个组件：

  1. import Vue from 'vue'
  2. import SvgIcon from '@/components/SvgIcon'// svg component
  4. // register globally
  5. Vue.component('svg-icon', SvgIcon)
  7. const req = require.context('./svg', false, /\.svg$/)    // 这里./svg是存放你的svg格式的icon的文件夹
  8. const requireAll = requireContext => requireContext.keys().map(requireContext)
  9. requireAll(req)

然后使用：

  1. //  这个icon-class="man"，man就是你要用的svg的名字
  2. <svg-icon icon-class="man" style="width:40px;height:40px"></svg-icon>

发表评论

表情：
评论列表 （有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读