vue调整图标的大小_Vue 中icon使用的两种处理办法

组件式

通过新建一个icon组件，将svg图片进行封装，使用时可以传strokeColor来控制图标颜色。 贴代码：

export default {

name: 'icon',

props: {

strokeColor: {

type: String,

default: '#48B4FF'

}

}

}

例如我新建了这样一个Icon组件，当我在使用是就可以像其他组件一样引入，并可以通过props传入icon色值来改变图标颜色，例如：

此时图标颜色就是红色。

通过组件，我们同样可以可以改变svg的填充颜色，以及图标大小等属性，使用的灵活性可以提升。

通过使用阿里iconfont

通过使用iconfont我们可以选择不同的使用方式，在处理图标与文字颜色值相同的情况下，我们可以使用css类的这种实现方式来使用图标，下面就详细说明使用步骤：

(根据设计给的svg图片，来转换成我们使用的css文件) - 进入 https://www.iconfont.cn 注册账号登陆，新建自己项目(当直接使用他人已创建图标时可以忽略)

上传图标至已有项目中

在项目中新建Icon文件夹，并将icon文件下载解压到此文件夹

修改iconfont.css文件 编辑，根据图标名称，新增类选择器css样式，这样我们就可以在vue中通过class直接使用图标

蓝色部分时项目名加上图标名称，我们可修改项目前缀名称：

在main.js 中引入刚才编辑的iconinfont.css文件

接下来就可以在使用icon了

图标颜色会根据父级color颜色变化而变化。

end

提供两种不同方按，在实际项目中我们可以根据自己的需求来选择。