vue2怎么渲染el-icon-s-home字符串图标

在 Vue2 中，可以通过绑定 `:class` 属性来渲染 `el-icon-s-home` 字符串图标。具体步骤如下：

1. 首先，在使用该字符串图标的组件中，需要导入 `element-ui` 的样式文件，例如：

<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

2. 然后，在模板中使用 `el-icon` 标签，并绑定 `:class` 属性，例如：

<template>
  <div>
    <i class="el-icon" :class="'el-icon-s-home'"></i>
  </div>
</template>

其中，`:class` 属性绑定的是一个对象或数组，这里我们绑定的是一个字符串 `'el-icon-s-home'`，这样就可以渲染出 `el-icon-s-home` 字符串图标了。

3. 如果需要使用其他样式的 `el-icon` 图标，只需要将 `:class` 属性绑定的字符串改为对应的样式类名即可，例如：

<template>
  <div>
    <i class="el-icon" :class="'el-icon-s-promotion'"></i>
  </div>
</template>

这样就可以渲染出 `el-icon-s-promotion` 样式的图标了。

相关问题

vue3 里的innerHTML 插入el-icon图标不显示

在 Vue.js 3 中，如果你试图通过 `innerHTML` 直接插入 `<el-icon>` 标签而不正确地引用它们，可能不会显示图标。Vue 是一种声明式框架，它依赖于模板绑定来管理DOM。为了正确显示 Element UI 的图标，你需要按照以下步骤操作：

1. 首先，确保你已经在项目中安装了 Element UI 和相关的依赖库，例如 `@element-ui/icons`。

2. 使用 `v-if`, `v-html`, 或者 `v-bind:class` 绑定动态内容，而不是直接设置 `innerHTML`。例如：

<template>
  <div v-if="showIcon">
    <el-icon :class="['your-class', iconName]">{{ iconName }}</el-icon>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIcon: true,
      iconName: 'el-icon-search', // 可替换为你需要的图标名
    };
  },
};
</script>

3. 如果你想从变量里动态生成 HTML 内容，确保变量值是一个有效的 HTML 字符串，并且包含正确的元素标签和属性。

4. 检查 `el-icon` 是否有正确的 CSS 类或路径指向所需的图标字体资源。

如果仍然无法显示图标，检查是否有样式冲突或路径是否正确。

<el-input v-model=“loginForm.userName” prefix-icon/> 怎么把<el-icon><UserFilled /></el-icon>用prefix-icon属性用组件的方式传入上面的input中

要在`<el-input>`标签中将自定义的`<el-icon>`组件作为前缀图标，并通过`v-model`绑定变量`loginForm.userName`，你可以这样做：

首先，在Vue组件中导入需要的ElIcon组件和UserFilled图标：

import { ElInput, ElIcon } from 'element-plus';
import UserFilled from '@element-plus/icons/lib/user-filled.vue'; // 如果是Element Plus的自定义图标，可能需要这么引入

然后，将UserFilled图标封装成一个自定义组件，例如`CustomUserIcon.vue`：

<template>
  <el-icon :icon="userFilled" />
</template>

<script>
export default {
  name: 'CustomUserIcon',
  components: {
    ElIcon,
  },
  props: {
    userFilled: {
      type: String,
      required: true,
    },
  },
};
</script>

在你的父组件模板里，你可以像这样使用这个新的组件：

<template>
  <div>
    <el-input
      v-model="loginForm.userName"
      :prefix-icon="customUserIcon"
    ></el-input>
    <!-- 其他内容... -->
  </div>
</template>

<script>
import CustomUserIcon from './CustomUserIcon.vue';

export default {
  components: {
    CustomUserIcon,
  },
  data() {
    return {
      loginForm: {
        userName: '',
      },
      customUserIcon: '<UserFilled />', // 这里使用字符串形式的用户填充图标路径
    };
  },
  //...
};
</script>

确保在`data`中初始化了`customUserIcon` prop，它应该是一个HTML实体，表示你要使用的图标路径。