vue导入图标的3种方式【阿里图标】

第一种方式 Font class- css点击【 Font class 】- 【下载至本地】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。@font-face {font-family: "iconfont"; /* Project id 3262995 */src: url('iconfont.woff2?t=1647910536684')

ミーム

11720人浏览 · 2022-03-22 16:38:50

ミーム · 2022-03-22 16:38:50 发布

第一种方式 Font class- css

在这里插入图片描述
点击【 Font class 】- 【下载至本地】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。

@font-face {
  font-family: "iconfont"; /* Project id 3262995 */
  src: url('iconfont.woff2?t=1647910536684') format('woff2'),
       url('iconfont.woff?t=1647910536684') format('woff'),
       url('iconfont.ttf?t=1647910536684') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-gouwuche-:before {
  content: "\e60b";
}

.icon-zhiwu:before {
  content: "\e600";
}

.icon-bianji:before {
  content: "\100ab";
}

然后在main.js中导入

import '@/assets/icon/iconfont.css'

在用图标的组件中直接使用就好了（class名就是css中的样式类名）


    <span class="iconfont icon-zhiwu"></span>
    <span class="iconfont icon-bianji"></span>
    <span class="iconfont con-gouwuche-"></span>

第二种方式 Symbol

点击【 Symbol 】- 【下载至本地】，解压之后导入到项目【/src/assets/iconfont】目录下。
在这里插入图片描述

在main.js中引用

// symbol 引用
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
//设置全局icon样式 
import '@/assets/iconGloble.css'

也可以对icon对图标进行基础设置，比如图标的宽高等。创建【/src/assets/iconGloble.css】文件

.icon{
  width:5em;
  height:5em;
  vertical-align:-0.15em;
  fill:currentColor;
  overflow:hidden;
}

在用图标的组件中使用。
注意：

class="icon"这个【icon】类名是设置图标的基础样式css样式类名。
xlink:href="#icon-zhiwu" 就是css中的样式类名，但是#必需要加

 <svg
      class="icon"
      aria-hidden="true"
    >
      <use xlink:href="#icon-zhiwu"></use>
    </svg>

后期追加图标

两种方式，其实都差不多。首先在【assets/iconfont/iconfont.css】中将你要追加的图标css样式加入，或者整个css文件的内容直接替换。点击【点此复制代码】后会在网页上打开一个新窗口，里面都是css样式
在这里插入图片描述

同样【assets/iconfont/iconfont.js】文件也是同样处理。点击【点此复制代码】
在这里插入图片描述

需求：

如果有很多新图标，但只需要添加一个的话，就只复制一个你需要的图标样式，然后追加到原css样式中。
- js也是同样处理，copy内容从…结束，然后追加到原来的js文件中。
如果多个新图标都需要的话，直接整个内容copy-paste就好。

第三种方式 .svg

安装svg-sprite-loader插件
命令：根据需要二选一即可。

//  方式一：npm
npm install svg-sprite-loader
// 方式二：yarn
yarn add svg-sprite-loader

webpack 配置：（webpack.base.conf.js）或者在vue.config.js文件内配置。这里是vue.config.js。在项目项目根目录下创建vue.config.js文件（chainWebpack位置开始）

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, './', dir)
}

module.exports = {
    // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  publicPath: './',  
  // 输出文件目录
  outputDir: 'dist',  
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,  
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,  
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,  
  // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
  integrity: false,  
  // webpack相关配置
  chainWebpack: config => {
    // svg rule loader
    const svgRule = config.module.rule('svg') // 找到svg-loader
    svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
    svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
    svgRule // 添加svg新的loader处理
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    // 修改images loader 添加svg处理
    const imagesRule = config.module.rule('images')
    //将 icons 文件夹排除, 不让 url-loader 处理该文件夹
    imagesRule.exclude.add(resolve('src/assets/icons'))
    config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
  }
}

点击【SVG下载】存储到【src/assets/icons/svg/】目录下，名为【bianji.svg】
在这里插入图片描述

在【src/assets/icons】目录下创建index.js文件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue' 
Vue.component('svg-icon',SvgIcon)

// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)

// 加载目录下的所有 svg 文件
requireAll(req)

在main.js文件中引入

import '@/assets/icons'

创建【components/SvgIcon/SvgIcon.vue】组件。图标的大小可以在此文件的css样式【.svg-icon】中进行设置。

<template>
  <svg
    :class="svgClass"
    aria-hidden="true"
  >
    <use :xlink:href="iconName" />
  </svg>
</template> 

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`;
    },
    svgClass () {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在需要使用的组件中直接使用。这里的icon-class="bianji" 的图标名就是svg的名字。

<svg-icon icon-class="bianji"></svg-icon>

在这里插入图片描述

追加：自定义修改图标的大小和颜色

在【components/SvgIcon/SvgIcon.vue】组件中添加一组props对象【styleObject】来根据需要自定义图标大小和颜色。
注意：【:style=“styleObjectSet”】这个字段是必需的，在其他组件内不引用时分为两种情况，需要自定义和不需要（默认）

不需要（默认）：设置空值就好，可以没有值，但一定要有这个属性style-object=""。

<svg-icon style-object=""  icon-class="logo"  ></svg-icon>

自定义：动态绑定数据对象


<template>
	<svg-icon icon-class="ma" :style-object="styleObject"></svg-icon>
</template>
<script>
export default {
  data () {
    return {
      styleObject: {
        width: '15em',
        height: '15em',
        fill: 'red',
      }
    };
  },
</script>

components/SvgIcon/SvgIcon.vue

<template>
  <svg
    :class="svgClass"
    :style="styleObjectSet"
    aria-hidden="true"
  >
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
    styleObject: {
      fill: {
        type: String,
        default: "currentColor",
      },
      width: {
        default: '5em',
      },
      height: {
        default: '5em',
      }
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`;
    },
    svgClass () {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
    styleObjectSet () {
      const { width, height, fill } = this.styleObject
      return `width:${width};height:${height};fill:${fill}`
    }
  },
};
</script>

<style scoped>
.svg-icon {
  width: 3em;
  height: 3em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^