1、安装项目依赖 npm install vue-svgicon -D 2、在项目目录中引入svg图片(任意目录) 3、配置svg图标解析和输出路径 因为vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置: 4、在main.js中引入svgIcon组件,并且全局注册下 ...
1、安装项目依赖 npm install vue-svgicon -D 2、在项目目录中引入svg图片(任意目录) 3、配置svg图标解析和输出路径 因为vue-svgicon本质会把svg图标解析成js文件,在项目中是通过import导入生成的js文件来达到对svg图标的引用,具体可以在package.json中做以下配置: 4、在main.js中引入svgIcon组件,并且全局注册下 ...
importVuefrom'vue'importSvgIconfrom'@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon',SvgIcon)constreq=require.context('./svg',false,/\.svg$/)constrequireAll=requireContext=>requireContext.keys().map(requireContext)requireAll(req) 2.3、src--assets--icons--svgo...
④ 可以看到上面的代码引入了SvgIcon组件(目录src/components/SvgIcon),具体的代码如下: <template> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> // doc: https://panjiachen.github.io/vue-element-admin-site/feat...
8 SvgIcon组件使用到目前为止我们已经全局注册好了组件，现在我们只要在需要使用到svg图标的地方引入改组件即可，通过svg-icon标签来引入标签，icon-class传入制定的图标名称即可，如引入用户头像（<svg-icon icon-class="user"/>即可）。9 默认情况下，显示的是svg的原图大小，所以我在svg-icon外面定义了一个div，...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> ...
* 使用方法:<svg-iconsvg-name="icon-name"width="40px"height="40px"color="#f00"></svg-icon>*/ const props = defineProps({ svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: {
<svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default:
在你使用的Vue中找到一个vue.config.js文件,如果没有就创建。 虽然官方文档说的是在webpack开头的文件中操作,但是我们在Vue中没有,所以我们就要将Vue-cli的内容翻译成svg-sprite-loader文档的内容 第三步 在vue.config.js中 写如下代码 const path = require("path"); ...
// 本地SVG图标import'virtual:svg-icons-register' 二,使用 (一)封装组件 创建一个SPIcon组件,封装svg。避免重复编码 <template><svgaria-hidden="true"class="svg-icon":style="{height:size,width:size}"><use:xlink:href="symbolId":fill="color"></use></svg></template>import{computed}from'vue'...