npm 包 @svg-icons/material-filled 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@svg-icons/material-filled 是一个提供 Material Design 风格图标的 npm 包。它包含了 1000 多个 Material Design 风格的图标，覆盖了各种应用场景。使用这个包可以让你轻松地添加漂亮、一致性的图标到你的前端项目中。

安装

你可以通过 npm 安装这个包，使用以下命令：

npm install @svg-icons/material-filled

使用

导入图标

在应用中使用这个包的图标，需要先导入需要的图标。有两种导入方式：

方式一：使用 ES6 import 语法

你可以使用 ES6 的 import 语法导入需要的图标，如：

import { AddCircle } from '@svg-icons/material-filled/AddCircle';

方式二：使用 CommonJS require 语法

你也可以使用 CommonJS 的 require 语法导入需要的图标，如：

const { AddCircle } = require('@svg-icons/material-filled/AddCircle');

使用图标

图标导入后，就可以在应用中使用它们了。有两种使用方式：

方式一：以组件方式使用

你可以把导入的图标组件当做一个 React 组件使用，如：

import { AddCircle } from '@svg-icons/material-filled/AddCircle';

function MyComponent() {
  return <AddCircle />;
}

方式二：以 SVG 标签方式使用

你也可以以 SVG 标签的形式使用导入的图标，如：

import { AddCircle } from '@svg-icons/material-filled/AddCircle';

function MyComponent() {
  return <svg viewBox="0 0 24 24"><AddCircle /></svg>;
}

程序化地操作图标

@svg-icons/material-filled 提供了多种图标操作方法，可以帮助你更好地使用和操作图标。以下是常用的几种方法：

颜色和大小

你可以通过设置 color 和 fontSize 样式，来调整图标的颜色和大小，如：

import { AddCircle } from '@svg-icons/material-filled/AddCircle';

function MyComponent() {
  return <AddCircle style={{ color: 'red', fontSize: '30px' }} />;
}

设为按钮图标

你可以把图标设为按钮的图标，如：

-- -------------------- ---- -------
------ - --------- - ---- ---------------------------------------

-------- ---------- -
  ------ -
    --------
      ---------- --
      ----
    ---------
  --
-展开代码

旋转

你可以通过设置样式 transform: rotate(90deg) 来对图标进行旋转，如：

import { AddCircle } from '@svg-icons/material-filled/AddCircle';

function MyComponent() {
  return <AddCircle style={{ transform: 'rotate(90deg)' }} />;
}

总结

@svg-icons/material-filled 提供了高质量、丰富的 Material Design 风格图标，让我们可以轻松地为前端应用添加漂亮、一致性的图标。使用这个包需要掌握导入、使用和操作图标的方法，理解它们可以让你使用更得心应手。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f24d3ae3b0ab45f74a8b92a

npm 包 @svg-icons/material-filled 使用教程

简介

安装

使用