阿里图标素材在vuecli中的使用（.svg方式）

1、在vuecli的src下创建icons文件夹，子目录svg，用于存放阿里的.svg图标文件

package.json中安装：          svg-sprite-loader

2.svg 目录主要用于存放 svg 文件，来看一下 index.js 的内容，功能就是把组件注册到全局，方便使用：

在src/icons/index.js中使用webpack的require.context自动引入src/icons下面所有的图标。

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件// register globally，把SvgIcon组件注册为名为svg-icon的全局组件
Vue.component('svg-icon', SvgIcon)const requireAll = requireContext => requireContext.keys().map(requireContext);/*** 使用webpack的require.context自动引入src/icons下面所有的图标。** require.context(directory,useSubdirectories,regExp)* require.context():需要一次性的引入某个文件夹下的所有文件形参：directory：需要引入文件的目录useSubdirectories：是否查找该目录下的子级目录regExp：匹配引入文件的正则表达式*/const req = require.context('./svg', false, /\.svg$/);
// requireAll(req)export default {allSvg:  requireAll(req)
}

3、在 src/components/ 下创建 SvgIcon 组件

<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>

4、在main.js中引入

import '@/icons';//引入svg模板

5、在组件中如何使用：

1) 这里就会使用 src/icons/svg/example.svg 文件。

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

2) 批量展示效果，可用于配置系统图标

<template><div><el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1" v-for="(v,index) in svgList" :key="index"><div @click="show(v)" style="padding-bottom:8px;text-align: center"><svg-icon :icon-class="v"></svg-icon><div>{{v}}</div></div></el-col></el-row><hr><h3>单独使用，在src/icons/index.js中已经把Svgicon注册为全局组件,可以直接使用</h3><svg-icon icon-class="督导审核"></svg-icon><br><p>选择展示区域</p><svg-icon v-for="(x,index) in selectedSvg" :icon-class="x" :key="index"></svg-icon></div></template><script>import svgList from "@/icons/index"export default {name: "svgStu",data() {return {svgList: [],selectedSvg: []}},mounted() {console.log(svgList)for (var i = 0; i < svgList.allSvg.length; i++) {let id = svgList.allSvg[i].default.id.replace('icon-', '');this.svgList.push(id)}},methods: {show(event) {this.$message.success('选择了' + event);this.selectedSvg.push(event)}}}
</script><style scoped>h3 {text-align: center;}
</style>

6、接下来是最重要的一步

首先需要注意的是，通过 vue-cli3 构建的项目可以初始化进行很多选择，我构建的目录更多的是以 *.config.js 的形式存在的。

在根目录下创建一个名为 vue.config.js 文件，接下来的操作都和它有关，先来看一下它完整的代码：

const path = require('path')function resolve(dir) {return path.join(__dirname, './', dir)
}module.exports = {chainWebpack: config => {config.plugin('define').tap(args => {const argv = process.argvconst icourt = argv[argv.indexOf('--icourt-mode') + 1]args[0]['process.env'].MODE = `"${icourt}"`return args})// svg rule loaderconst svgRule = config.module.rule('svg') // 找到svg-loadersvgRule.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')imagesRule.exclude.add(resolve('src/icons'))config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)},configureWebpack: {devServer: {open: true,// https: true,proxy: {'/user': {target: 'https://devadminschool.icourt.cc',},'/live': {target: 'https://devadminschool.icourt.cc',},},},},
}

转载于：https://www.cnblogs.com/cat-eol/p/11784125.html

demo:https://download.csdn.net/download/caidingnu/12361199

阿里图标素材在vuecli中的使用（.svg方式）相关推荐

react中通过Antd使用阿里图标
react中通过Antd使用iconfont阿里图标安装依赖组件中引入安装依赖 npm install --save @ant-design/icons 组件中引入 **//从antd中引入fo ...
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程作者:张国军_Suger 开发工具与关键技术:Win10.项目.图标对于编程人员来说,有一个不可获取的图库就是阿里图标库,这 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
React项目中如何结合antd引入阿里图标（外联方式）
在Raect项目中,图标的使用不可避免,如何使用根据antd来使用阿里图标库? 一.在阿里图标库中选中自己需要的图标存到自己的项目当中并下载至本地二.1.在React项目的根目录下创建一个stati ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...

阿里图标素材在vuecli中的使用（.svg方式）

阿里图标素材在vuecli中的使用（.svg方式）相关推荐

最新文章

热门文章